#app-content-wrapper{display:flex;width:100%}#left-sidebar{flex:0 0 200px;padding-right:20px;border-right:1px solid var(--border-color);margin-right:20px}#right-content{flex:1}#app-description{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-color)}#app-description p{margin:0}#controls{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;gap:10px;align-items:stretch}#controls h2{margin-bottom:10px;width:100%}#controls button,#controls .button-like-label{justify-content:flex-start;background-color:var(--primary);color:#fff;border-color:var(--primary-dark)}#controls button:hover,#controls .button-like-label:hover{background-color:var(--primary-dark);border-color:var(--primary-dark)}#clear-all-btn{background-color:var(--danger)!important;border-color:var(--danger)!important}#clear-all-btn:hover{background-color:#d63e60!important;border-color:#d63e60!important}.button-like-label{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.9rem;font-weight:500;transition:var(--transition);display:inline-flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;line-height:1.5;border:1px solid var(--primary-dark)}#time-cards-container,#timer-cards-container{margin-bottom:30px}#time-cards-container h2,#timer-cards-container h2{margin-bottom:15px;padding-bottom:5px;border-bottom:1px solid var(--border-color)}.card-layout-container{display:flex;flex-wrap:wrap;gap:15px;padding-top:10px}.card-layout-container .no-cards-placeholder{width:100%;color:var(--text-muted);font-style:italic;text-align:center;padding:20px}.card.time-card,.card.timer-card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:12px;box-shadow:var(--box-shadow-sm);position:relative;flex-basis:280px;flex-grow:0;flex-shrink:0;min-width:250px;display:flex;flex-direction:column;margin-bottom:0}.card .time-display-container,.card .date-display,.card .timer-display{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.card.time-card .card-header,.card.timer-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border-color);min-height:35px;position:relative}.card-header h3{margin:0;font-size:1.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 30px)}.timer-card .card-header h3.timer-name{cursor:pointer}.timer-card .card-header h3.timer-name:hover{color:var(--primary)}.card-controls{display:flex;gap:10px;margin-top:10px;margin-bottom:10px;justify-content:flex-start}.card-controls select{padding:3px 6px;font-size:.9em;min-width:auto}.card-delete-btn{position:absolute;top:5px;right:5px;background-color:var(--danger);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;line-height:20px;text-align:center;cursor:pointer;padding:0;z-index:3;display:flex;align-items:center;justify-content:center}.card-delete-btn:hover{background-color:#c00}.rename-input{font-size:1.1em;padding:2px 5px;border:1px solid var(--input-border-color);border-radius:3px;width:calc(100% - 30px);position:absolute;left:0;top:-2px;background-color:var(--input-bg-color);color:var(--text-color);z-index:2;box-sizing:border-box}.time-card .time-display{font-size:2.4em;font-weight:700;text-align:center;margin-bottom:2px;font-family:Courier New,Courier,monospace;line-height:1.1}.time-card .date-display{font-size:.85em;text-align:center;color:var(--text-muted);margin-bottom:10px;font-weight:700}.analog-clock{width:160px;height:160px;border:2px solid var(--gray-700);border-radius:50%;margin:5px auto 10px;position:relative;background-color:var(--card-bg);flex-shrink:0}.analog-clock .hand{position:absolute;bottom:50%;left:50%;transform-origin:center 100%;background-color:var(--gray-700);border-radius:2px}.analog-clock .hour-hand{width:6px;height:45px;transform:translate(-50%) rotate(0)}.analog-clock .minute-hand{width:4px;height:65px;transform:translate(-50%) rotate(0)}.analog-clock .second-hand{width:2px;height:70px;transform:translate(-50%) rotate(0);background-color:var(--danger)}.timer-card .timer-display{font-size:1.8em;font-weight:700;text-align:center;margin-bottom:10px;font-family:Courier New,Courier,monospace}.timer-card .timer-controls{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:3px;margin-top:10px}.timer-card .timer-controls button{width:90px;padding:8px 5px;flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:5px}.card-alarm-section{margin-top:15px;padding-top:10px;border-top:1px solid var(--border-color)}.card-alarm-section .collapsible-header{font-size:.9em;margin-bottom:8px;color:var(--text-muted);cursor:pointer;display:flex;justify-content:space-between;align-items:center}.card-alarm-section .collapsible-header:hover{color:var(--primary)}.card-alarm-section .collapse-icon{transition:transform .3s ease}.card-alarm-section .collapsible-header.collapsed .collapse-icon{transform:rotate(-90deg)}.card-alarm-section .collapsible-content{max-height:500px;overflow:hidden;transition:max-height .3s ease-out}.card-alarm-section .collapsible-content.collapsed{max-height:0}.card-alarm-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}.card-alarm-controls input[type=time]{padding:4px;border:1px solid var(--input-border-color);border-radius:4px;font-size:.9em;flex-grow:1;background-color:var(--input-bg-color);color:var(--text-color)}.card-alarm-controls select{padding:4px;border:1px solid var(--input-border-color);border-radius:4px;font-size:.9em;flex-grow:1;min-width:auto}.card-alarm-controls button{padding:5px 10px;font-size:.9em;min-width:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:5px}.card-alarm-list{list-style:none;padding:0;margin-top:5px;max-height:80px;overflow-y:auto;font-size:.85em}.card-alarm-list li{background-color:var(--gray-200);padding:4px 8px;margin-bottom:4px;border-radius:3px;display:flex;justify-content:space-between;align-items:center}.card-alarm-list .delete-alarm-btn{background:var(--danger);color:#fff;border:none;border-radius:50%;width:30px;height:30px;font-size:1.1em;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:5px;flex-shrink:0;padding:0}.card-alarm-list .delete-alarm-btn:hover{background-color:#c00}.card-alarm-list .delete-alarm-btn i{pointer-events:none}.card-alarm-list span{word-break:break-word;text-align:left;flex-grow:1}#custom-dialog-modal,#custom-confirm-modal,#custom-input-modal,#custom-select-modal{opacity:1;align-items:center;justify-content:center}#custom-dialog-modal .modal-content,#custom-confirm-modal .modal-content,#custom-input-modal .modal-content,#custom-select-modal .modal-content{transform:none;margin:0;max-height:none;overflow-y:visible}#custom-dialog-modal .dialog-content{padding:25px 30px;border-left:8px solid var(--primary);text-align:center;max-width:550px}#custom-dialog-modal p#custom-dialog-message{margin:0 0 20px;font-size:1.1em;line-height:1.5;text-align:left}.dialog-ok-button{min-width:90px;padding:12px 25px;border:none;color:#fff;border-radius:5px;cursor:pointer;font-size:1em;transition:background-color .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}#custom-dialog-modal .confirm-buttons{display:flex;justify-content:space-evenly;gap:5px;flex-wrap:nowrap}#custom-dialog-modal .dialog-content.info{border-left-color:var(--primary)}#custom-dialog-modal .dialog-content.info .dialog-ok-button{background-color:var(--primary)}#custom-dialog-modal .dialog-content.info .dialog-ok-button:hover{background-color:var(--primary-dark)}#custom-dialog-modal .dialog-content.error{border-left-color:var(--danger)}#custom-dialog-modal .dialog-content.error .dialog-ok-button{background-color:var(--danger)}#custom-dialog-modal .dialog-content.error .dialog-ok-button:hover{background-color:#d63e60}#custom-dialog-modal .dialog-content.success{border-left-color:var(--success)}#custom-dialog-modal .dialog-content.success .dialog-ok-button{background-color:var(--success)}#custom-dialog-modal .dialog-content.success .dialog-ok-button:hover{background-color:#05b386}#custom-dialog-modal .dialog-content.warning{border-left-color:var(--warning)}#custom-dialog-modal .dialog-content.warning .dialog-ok-button{background-color:var(--warning);color:var(--gray-800)}#custom-dialog-modal .dialog-content.warning .dialog-ok-button:hover{background-color:#e6bc5c}#custom-dialog-modal .dialog-content.alarm{border-left-color:var(--danger);background-color:#fff5f5}#custom-dialog-modal .dialog-content.alarm .dialog-ok-button{background-color:var(--danger)}#custom-dialog-modal .dialog-content.alarm .dialog-ok-button:hover{background-color:#d63e60}#custom-confirm-modal .confirm-content{padding:25px 30px;border-left:8px solid var(--warning);text-align:center;max-width:450px}#custom-confirm-modal p#custom-confirm-message{margin:0 0 25px;font-size:1.1em;line-height:1.5;text-align:left}.confirm-buttons{display:flex;justify-content:space-evenly;gap:5px;flex-wrap:nowrap}.confirm-buttons .confirm-yes{background-color:var(--danger);color:#fff;border-color:var(--danger)}.confirm-buttons .confirm-yes:hover{background-color:#d63e60}.confirm-buttons .confirm-no{background-color:var(--gray-400);color:#fff;border-color:var(--gray-400)}.confirm-buttons .confirm-no:hover{background-color:var(--gray-500)}#custom-input-modal .dialog-input-field{width:calc(100% - 20px);padding:10px;margin:15px 0;border:1px solid var(--input-border-color);border-radius:4px;font-size:1em;background-color:var(--input-bg-color);color:var(--text-color)}#custom-input-modal .confirm-buttons{display:flex;justify-content:space-evenly;gap:15px}#custom-select-modal .dialog-select-field{width:calc(100% - 20px);padding:10px;margin:15px 0;border:1px solid var(--input-border-color);border-radius:4px;font-size:1em;background-color:var(--input-bg-color);color:var(--text-color)}#custom-select-modal .confirm-buttons{display:flex;justify-content:space-evenly;gap:15px}.sortable-ghost{opacity:.4;background:#c8ebfb;border:1px dashed var(--primary)}.sortable-chosen,.sortable-drag{opacity:.9;box-shadow:var(--box-shadow-lg)}.card-layout-container .card{cursor:grab}.sortable-drag{cursor:grabbing!important}.hidden,.no-cards-placeholder.hidden{display:none}body.dark-theme .analog-clock{border-color:var(--gray-500);background-color:var(--card-bg)}body.dark-theme .analog-clock .hand{background-color:var(--text-color)}body.dark-theme .analog-clock .second-hand{background-color:var(--danger)}body.dark-theme .card-alarm-controls input[type=time],body.dark-theme .rename-input{background-color:var(--input-bg-color);color:var(--text-color);border-color:var(--input-border-color)}body.dark-theme #custom-dialog-modal .dialog-content.alarm{background-color:#3a1a1e}body.dark-theme .sortable-ghost{background:var(--gray-200)}@media (max-width: 768px){#app-content-wrapper{flex-direction:column}#left-sidebar{flex:none;width:100%;padding-right:0;border-right:none;margin-right:0;border-bottom:1px solid var(--border-color);padding-bottom:20px;margin-bottom:20px}#controls{flex-direction:row;flex-wrap:wrap}.card-layout-container{justify-content:center}.card.time-card,.card.timer-card{flex-basis:100%;min-width:0}}