body{
 --app-bg:#000000;
 --app-text:#ffffff;
 --panel-open-shift:190px;
 --panel-bg:rgba(28,28,30,0.74);
 --panel-border:rgba(255,255,255,0.14);
 --panel-text:#f5f5f7;
 --panel-muted:#d7d7dc;
 --panel-surface:rgba(255,255,255,0.03);
 --control-bg:rgba(255,255,255,0.06);
 --control-border:rgba(255,255,255,0.12);
 --button-bg:rgba(255,255,255,0.08);
 --button-border:rgba(255,255,255,0.14);
 --button-hover:rgba(255,255,255,0.15);
}

body{

 margin:0;
 background:var(--app-bg);
 overflow:hidden;
 font-family:"Google Sans Flex",sans-serif;

 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;

 height:100vh;
 gap:20px;

}

button,
input,
select,
textarea{
 font:inherit;
}

body[data-theme="light"]{
 --app-bg:#f5f5f7;
 --app-text:#111111;
 --panel-bg:rgba(255,255,255,0.84);
 --panel-border:rgba(17,17,17,0.12);
 --panel-text:#121212;
 --panel-muted:#3a3a3d;
 --panel-surface:rgba(17,17,17,0.03);
 --control-bg:rgba(17,17,17,0.05);
 --control-border:rgba(17,17,17,0.12);
 --button-bg:rgba(17,17,17,0.06);
 --button-border:rgba(17,17,17,0.12);
 --button-hover:rgba(17,17,17,0.12);
}

body.fonts-loading #clock,
body.fonts-loading .floating-text{
 visibility:hidden;
}

#clock{

 position:fixed;
 left:50%;
 top:50%;
 transform:translate(-50%, -50%);
 display:flex;
 align-items:baseline;
 gap:0;
 white-space:nowrap;
 font-variant-numeric:tabular-nums;
 color:var(--app-text);
 font-size:120px;
 line-height:1;
 font-family:"Google Sans Flex",sans-serif;
 z-index:1;
 user-select:none;
 touch-action:none;
 transition:margin-left 0.24s ease;

}

#timePrimary{
 display:inline-flex;
 align-items:baseline;
 gap:0;
}

#timeExtras{
 display:inline-flex;
 align-items:baseline;
  gap:0;
 position:static;
 margin-left:0;
}

body.panel-open #clock{
 margin-left:var(--panel-open-shift);
}

.theme-btn{
 position:fixed;
 top:18px;
 right:18px;
 z-index:4;
 width:40px;
 height:40px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid rgba(255,255,255,0.18);
 background:rgba(28,28,30,0.72);
 color:#f5f5f7;
 border-radius:12px;
 cursor:pointer;
 backdrop-filter:blur(16px) saturate(150%);
 -webkit-backdrop-filter:blur(16px) saturate(150%);
 box-shadow:0 6px 24px rgba(0,0,0,0.35);
 opacity:0;
 pointer-events:none;
 transition:opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.theme-btn-icon{
 font-family:"Material Symbols Outlined" !important;
 font-weight:normal;
 font-style:normal;
 display:inline-block;
 font-size:22px;
 line-height:1;
 text-transform:none;
 white-space:nowrap;
 direction:ltr;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
 font-feature-settings:"liga";
  font-variation-settings:"opsz" 24, "wght" 400, "FILL" 0, "GRAD" 0;
}

.theme-btn.visible{
 opacity:1;
 pointer-events:auto;
}

#clock.draggable{
 cursor:move;
}

#timeHour{
 display:inline-block;
 font-size:inherit;
 min-width:2ch;
 text-align:center;
}

#timeMainColon{
 display:inline-block;
 font-size:inherit;
 transition:opacity 0.12s linear;
}

#timeMinute{
 display:inline-block;
 font-size:inherit;
 min-width:2ch;
 text-align:center;
}

#timeColon{
 display:inline-block;
 font-size:inherit;
}

#timeSeconds{
 display:inline-block;
 min-width:2ch;
 text-align:center;
 font-size:inherit;
 font-variant-numeric:tabular-nums;
}

#timeMilliDot{
 display:inline-block;
 font-size:inherit;
}

#timeMilliseconds{
 display:inline-block;
 min-width:3ch;
 text-align:center;
 font-size:inherit;
 font-variant-numeric:tabular-nums;
}

#timeMeridiem{
 display:inline-block;
 min-width:2.5ch;
 text-align:left;
 margin-left:0.12em;
 font-size:inherit;
}

.hamburger{
 position:fixed;
 left:18px;
 top:18px;
 width:40px;
 height:40px;
 border:1px solid rgba(255,255,255,0.18);
 background:rgba(28,28,30,0.72);
 color:#f5f5f7;
 border-radius:12px;
 font-size:20px;
 line-height:1;
 backdrop-filter:blur(16px) saturate(150%);
 -webkit-backdrop-filter:blur(16px) saturate(150%);
 box-shadow:0 6px 24px rgba(0,0,0,0.35);
 z-index:4;
 opacity:0;
 pointer-events:none;
 transition:opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

body[data-theme="light"] .hamburger{
 border-color:rgba(17,17,17,0.12);
 background:rgba(255,255,255,0.88);
 color:#111111;
 box-shadow:0 6px 24px rgba(17,17,17,0.12);
}

body[data-theme="light"] .theme-btn{
 border-color:rgba(17,17,17,0.12);
 background:rgba(255,255,255,0.88);
 color:#111111;
 box-shadow:0 6px 24px rgba(17,17,17,0.12);
}

.hamburger.visible{
 opacity:1;
 pointer-events:auto;
 transform:translateY(0);
}

body.panel-open .hamburger{
 opacity:0 !important;
 pointer-events:none !important;
}

.hamburger:hover{
 background:rgba(44,44,46,0.78);
}

.controls{

 position:fixed;
 top:0;
 left:0;
 bottom:0;
 width:min(92vw,380px);
 background:var(--panel-bg);
 border-right:1px solid var(--panel-border);
 padding:16px;
 box-sizing:border-box;
 display:flex;
 flex-direction:column;
 gap:12px;
 color:var(--panel-text);
 font-family:"Google Sans Flex",sans-serif;
 backdrop-filter:blur(22px) saturate(165%);
 -webkit-backdrop-filter:blur(22px) saturate(165%);
 transition:transform 0.24s ease;
 transform:translateX(-102%);
 z-index:3;
 overflow-y:auto;
 overflow-x:hidden;
}

.controls.open{
 transform:translateX(0);
}

.panel-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.panel-header h2{
 margin:0;
 font-size:17px;
 font-weight:600;
 letter-spacing:-0.01em;
}

.panel-header button{
 width:30px;
 height:30px;
 padding:0;
 font-size:15px;
}

.panel-section{
 border:1px solid var(--panel-border);
 border-radius:14px;
 padding:12px;
 background:var(--panel-surface);
}

.section-title-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin-bottom:8px;
}

.panel-section h3{
 margin:0;
 font-size:13px;
 color:var(--panel-text);
 letter-spacing:0.01em;
 font-weight:600;
 text-transform:uppercase;
}

.setting-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 align-items:center;
 border:none;
 margin:0;
 padding:0;
 min-width:0;
}

.setting-grid label{
 color:var(--panel-muted);
 font-size:12px;
 font-weight:500;
}

.setting-grid input,
.setting-grid select{
 width:100%;
 box-sizing:border-box;
 border:1px solid var(--control-border);
 background:var(--control-bg);
 color:var(--panel-text);
 border-radius:10px;
 padding:8px 10px;
 font-size:13px;
 outline:none;
 transition:border-color 0.15s ease, background 0.15s ease;
}

.number-stepper{
 width:100%;
 min-width:0;
 display:grid;
 grid-template-columns:minmax(0, 1fr) 44px 44px;
 align-items:stretch;
 border:1px solid var(--control-border);
 border-radius:14px;
 background:var(--control-bg);
 box-shadow:none;
 overflow:hidden;
}

.number-stepper-field{
 min-width:0;
 background:transparent;
}

.number-stepper-field input{
 appearance:textfield;
 -webkit-appearance:none;
 -moz-appearance:textfield;
 border:none !important;
 background:transparent !important;
 color:var(--panel-text) !important;
 border-radius:0 !important;
 height:100%;
  padding:8px 12px !important;
 box-shadow:none !important;
 text-align:left;
}

.number-stepper-btn{
 border:none;
 border-left:1px solid var(--control-border);
 border-radius:0;
 background:transparent;
 color:var(--panel-text);
 font-size:28px;
 font-weight:300;
 line-height:1;
 padding:0;
 min-width:44px;
 min-height:40px;
 display:flex;
 align-items:center;
 justify-content:center;
}

.number-stepper-btn:hover{
 background:var(--button-hover);
 border-color:var(--control-border);
}

.number-stepper-btn:active{
 transform:none;
 background:var(--button-bg);
}

.history-number-stepper{
 width:100%;
 grid-template-columns:minmax(0, 1fr) 36px 36px;
}

.history-number-stepper .number-stepper-btn{
 min-width:36px;
 min-height:34px;
 font-size:24px;
}

.setting-grid select{
 color-scheme:dark;
}

.native-select-hidden{
 position:absolute;
 opacity:0;
 pointer-events:none;
 width:0;
 height:0;
 margin:0;
}

.custom-select{
 position:relative;
 width:100%;
 min-width:0;
}

.custom-select-trigger{
 width:100%;
 min-height:42px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 border:1px solid var(--control-border);
 background:var(--control-bg);
 color:var(--panel-text);
 border-radius:14px;
  padding:0 14px;
 box-shadow:none;
 font-size:13px;
 font-weight:500;
}

.custom-select-trigger:hover{
 background:var(--control-bg);
 border-color:var(--control-border);
}

.custom-select.open .custom-select-trigger{
 border-color:#7ab0ff;
 box-shadow:0 0 0 1px rgba(122,176,255,0.2);
}

.custom-select-trigger-text{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 text-align:left;
}

.custom-select-trigger-icon{
 flex:0 0 auto;
 font-size:12px;
 line-height:1;
 color:var(--panel-muted);
 transform:rotate(180deg);
 transition:transform 0.18s ease;
}

.custom-select.open .custom-select-trigger-icon{
 transform:rotate(0deg);
}

.custom-select-menu{
 position:absolute;
 top:calc(100% + 8px);
 left:0;
 right:0;
 display:none;
 padding:0;
 border-radius:14px;
 border:1px solid var(--control-border);
 background:#2b2b2f;
 box-shadow:0 10px 24px rgba(0,0,0,0.18);
 overflow:hidden;
 z-index:25;
}

body[data-theme="light"] .custom-select-menu{
 background:#ffffff;
}

.custom-select.open .custom-select-menu{
 display:block;
}

.custom-select-option{
 width:100%;
 border:none;
 border-radius:0;
 background:transparent;
 color:var(--panel-text);
 text-align:left;
 padding:14px 16px;
 font-size:13px;
 font-weight:500;
 box-shadow:none;
}

.custom-select-option:hover{
 background:var(--button-hover);
 border-color:transparent;
}

.custom-select-option.selected{
 background:var(--button-bg);
 color:var(--panel-text);
 font-weight:600;
}

.setting-grid select option,
.history-font option{
 background:#2b2b2f;
 color:#f5f5f7;
}

body[data-theme="light"] .setting-grid select option,
body[data-theme="light"] .history-font option{
 background:#ffffff;
 color:#111111;
}

.setting-grid input:focus,
.setting-grid select:focus{
 border-color:rgba(10,132,255,0.8);
 background:rgba(255,255,255,0.12);
}

.toggle{
 position:relative;
 width:46px;
 height:24px;
 display:inline-block;
}

.toggle input{
 opacity:0;
 width:0;
 height:0;
}

.toggle-slider{
 position:absolute;
 inset:0;
 background:rgba(120,120,128,0.45);
 border:1px solid rgba(255,255,255,0.14);
 border-radius:999px;
 cursor:pointer;
 transition:background 0.2s ease, border-color 0.2s ease;
}

.toggle-slider::before{
 content:"";
 position:absolute;
 width:18px;
 height:18px;
 left:2px;
 top:2px;
 border-radius:50%;
 background:#fff;
 transition:transform 0.2s ease;
}

.toggle input:checked + .toggle-slider{
 background:#0a84ff;
 border-color:rgba(10,132,255,0.95);
}

.toggle input:checked + .toggle-slider::before{
 transform:translateX(21px);
}

.panel-section.disabled{
 background:rgba(112,78,46,0.4);
 border-color:rgba(171,123,84,0.6);
}

.panel-section.disabled .setting-grid label{
 color:#e8d8ca;
}

.panel-section.disabled .setting-grid input,
.panel-section.disabled .setting-grid select{
 background:rgba(150,108,75,0.35);
 border-color:rgba(170,125,90,0.62);
 color:#e8d7c8;
}

.panel-section.disabled button{
 background:rgba(150,108,75,0.35);
 border-color:rgba(170,125,90,0.62);
 color:#e8d7c8;
}

.panel-section.disabled .text-history{
 opacity:0.7;
}

.panel-section.disabled .text-history button{
 pointer-events:none;
}

.setting-grid input[type="color"]{
 padding:0;
 height:34px;
 border-radius:10px;
 overflow:hidden;
 cursor:pointer;
}

.setting-grid input[type="color"]::-webkit-color-swatch-wrapper{
 padding:0;
}

.setting-grid input[type="color"]::-webkit-color-swatch{
 border:none;
 border-radius:10px;
}

.setting-grid input[type="color"]::-moz-color-swatch{
 border:none;
 border-radius:10px;
}

.panel-actions{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 align-items:stretch;
 margin-top:6px;
 padding:2px 2px 0;
}

.panel-footer{
 margin-top:auto;
 padding:18px 4px 4px;
 display:flex;
 align-items:center;
 gap:12px;
 color:var(--panel-text);
}

.panel-footer-logo{
 width:44px;
 height:44px;
 border-radius:0;
 object-fit:cover;
 flex:0 0 auto;
 box-shadow:none;
}

.panel-footer-text{
 font-size:13px;
 font-weight:500;
 letter-spacing:-0.01em;
 white-space:nowrap;
}

.panel-actions button{
 flex:1 1 110px;
 min-width:110px;
 white-space:nowrap;
}

.config-status{
 display:block;
 min-height:16px;
 margin:8px 2px 0;
 color:var(--muted-text);
 font-size:11px;
 line-height:1.3;
}

.config-status[data-error="true"]{
 color:#d66b6b;
}

.top-reset-btn{
 width:100%;
 margin:0 0 4px;
}

button{
 border:1px solid var(--button-border);
 background:var(--button-bg);
 color:var(--panel-text);
 border-radius:10px;
 padding:7px 11px;
 cursor:pointer;
 font-size:12px;
 font-weight:500;
 letter-spacing:0.01em;
 transition:background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

button:hover{
 background:var(--button-hover);
 border-color:var(--button-border);
}

button:active{
 transform:translateY(1px);
}

#fontStatus{
 color:var(--panel-muted);
 font-size:12px;
 min-height:15px;
}

.panel-backdrop{
 position:fixed;
 inset:0;
 background:transparent;
 z-index:2;
}

.floating-text{
 transition:margin-left 0.24s ease, border-color 0.2s ease, background 0.2s ease;
}

body.panel-open .floating-text{
 margin-left:var(--panel-open-shift);
}

.floating-text{
 position:fixed;
 z-index:1;
 cursor:move;
 user-select:none;
 white-space:pre-wrap;
 border:1px dashed transparent;
 border-radius:6px;
 background:transparent;
 padding:8px 12px;
 min-width:36px;
 min-height:30px;
 touch-action:none;
 transition:margin-left 0.24s ease, border-color 0.2s ease, background 0.2s ease;
}

.floating-text.near,
.floating-text:hover{
 border-color:rgba(255,255,255,0.6);
 background:rgba(0,0,0,0.18);
}

.floating-text-content{
 display:inline-block;
 line-height:1.1;
 font-size:38px;
}

.floating-text.editing{
 cursor:text;
}

.floating-text-content[contenteditable="true"]{
 outline:1px solid rgba(255,255,255,0.55);
 cursor:text;
}

.floating-resize-handle{
 position:absolute;
 width:14px;
 height:14px;
 right:2px;
 bottom:2px;
 border-right:2px solid rgba(255,255,255,0.75);
 border-bottom:2px solid rgba(255,255,255,0.75);
 cursor:nwse-resize;
 opacity:0;
 pointer-events:none;
 transition:opacity 0.2s ease;
}

.floating-text.near .floating-resize-handle,
.floating-text:hover .floating-resize-handle{
 opacity:1;
 pointer-events:auto;
}

.floating-resize-handle::before{
 content:"";
 position:absolute;
 width:6px;
 height:6px;
 right:-1px;
 bottom:-1px;
 background:rgba(255,255,255,0.8);
 border-radius:2px;
}

.text-history{
 display:flex;
 flex-direction:column;
 gap:8px;
 margin-top:10px;
 max-height:180px;
 overflow-y:auto;
 overflow-x:hidden;
}

.text-history-item{
 display:grid;
 grid-template-columns:minmax(0, 1fr);
 gap:10px;
 background:var(--panel-surface);
 border:1px solid var(--panel-border);
 border-radius:14px;
 padding:10px;
}

.history-content{
 font-size:13px;
 color:var(--panel-text);
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 max-width:none;
}

.history-actions{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
 align-items:center;
}

.history-actions button{
 padding:7px 10px;
 font-size:12px;
}

.history-empty{
 margin:0;
 color:#c7c7c7;
 font-size:12px;
}

@media (max-width:720px){
 #clock{
  font-size:82px;
 }
}





/* Scrollbar and history overflow polish */
.controls{
 overflow-y:auto;
 overflow-x:hidden;
}

.text-history{
 overflow-y:auto;
 overflow-x:hidden;
 min-width:0;
 scrollbar-gutter:stable;
}

.text-history-item{
 min-width:0;
}

.history-content{
 min-width:0;
}

.history-actions{
  min-width:0;
}

.controls,
.text-history{
 scrollbar-width:thin;
 scrollbar-color:rgba(255,255,255,0.35) rgba(255,255,255,0.08);
}

.controls::-webkit-scrollbar,
.text-history::-webkit-scrollbar{
 width:10px;
 height:10px;
}

.controls::-webkit-scrollbar-track,
.text-history::-webkit-scrollbar-track{
 background:rgba(255,255,255,0.08);
 border-radius:999px;
}

.controls::-webkit-scrollbar-thumb,
.text-history::-webkit-scrollbar-thumb{
 background:rgba(255,255,255,0.3);
 border-radius:999px;
 border:2px solid transparent;
 background-clip:padding-box;
}

.controls::-webkit-scrollbar-thumb:hover,
.text-history::-webkit-scrollbar-thumb:hover{
 background:rgba(255,255,255,0.45);
}
/* Number input spinner polish */
.setting-grid input[type="number"],
.history-size{
 color-scheme:dark;
 -moz-appearance:textfield;
}

.setting-grid input[type="number"]::-webkit-inner-spin-button,
.setting-grid input[type="number"]::-webkit-outer-spin-button,
.history-size::-webkit-inner-spin-button,
.history-size::-webkit-outer-spin-button{
 -webkit-appearance:none;
 margin:0;
 opacity:0;
 pointer-events:none;
}