:root{--indigo-600:#4f46e5;--indigo-700:#4338ca;--indigo-500:#6366f1;--blue-500:#3b82f6;--blue-600:#2563eb;--green-500:#22c55e;--green-600:#16a34a;--purple-500:#a855f7;--purple-600:#9333ea;--purple-700:#7e22ce;--purple-800:#6b21a8;--yellow-500:#eab308;--yellow-600:#ca8a04;--red-500:#ef4444;--red-600:#dc2626;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#11182c;--white:#ffffff;--black:#000000}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;display:flex;flex-direction:column;min-height:100vh;background-color:var(--gray-100);color:var(--gray-800);line-height:1.5}header{position:fixed;top:0;left:0;right:0;z-index:50;height:64px;background-color:var(--white);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}.header-title-group{display:flex;align-items:baseline}.header-title{font-size:1.25rem;font-weight:700;color:var(--gray-800)}#version-info{font-size:.875rem;color:var(--gray-500);margin-left:.5rem}.header-link{display:inline-flex;align-items:center;padding:.5rem .75rem;border:1px solid transparent;font-size:.875rem;line-height:1;font-weight:500;border-radius:.375rem;color:var(--white);background-color:var(--indigo-600);text-decoration:none;transition:background-color .15s ease-in-out}.header-link:hover{background-color:var(--indigo-700)}.header-link:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--indigo-500)}.header-link i{margin-right:.5rem;height:1rem;width:1rem;vertical-align:middle}main{flex-grow:1;padding-top:70px;padding-bottom:60px;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;padding-top:1.5rem;padding-bottom:1.5rem}.description{text-align:center;color:var(--gray-600);margin-bottom:1.5rem}.setup-controls-wrapper{margin-bottom:1.5rem;background-color:var(--white);padding:0;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);overflow:hidden}.toggle-setup-bar{background-color:var(--gray-100);color:var(--gray-700);border:none;border-bottom:1px solid var(--gray-300);padding:.6rem 1rem;cursor:pointer;font-weight:600;width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:background-color .15s ease-in-out}.toggle-setup-bar:hover{background-color:var(--gray-200)}.toggle-setup-bar:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--indigo-500)}.toggle-setup-bar i{height:1.25rem;width:1.25rem;transition:transform .2s ease-in-out;color:var(--gray-600)}.toggle-setup-bar.collapsed i{transform:rotate(-90deg)}.toggle-setup-bar.collapsed{border-bottom-color:transparent}.action-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;overflow:hidden;transition:max-height .3s ease-out,padding .3s ease-out,margin-top .3s ease-out;max-height:500px;padding:.75rem;margin-top:0;background-color:var(--white)}.action-buttons.hidden{max-height:0;padding-top:0;padding-bottom:0;margin-top:0}.action-buttons .button{font-weight:700;padding:.5rem 1rem;border-radius:.375rem;display:inline-flex;align-items:center;color:var(--white);border:none;cursor:pointer;transition:background-color .15s ease-in-out;line-height:1.25rem}.action-buttons .button i{margin-right:.5rem;height:1.25rem;width:1.25rem;vertical-align:middle}.button-blue{background-color:var(--blue-500)}.button-blue:hover{background-color:var(--blue-600)}.button-green{background-color:var(--green-500)}.button-green:hover{background-color:var(--green-600)}.button-purple{background-color:var(--purple-500)}.button-purple:hover{background-color:var(--purple-600)}.button-yellow{background-color:var(--yellow-500)}.button-yellow:hover{background-color:var(--yellow-600)}.button-gray{background-color:var(--gray-300);color:var(--gray-800)}.button-gray:hover{background-color:var(--gray-400)}.button-red{background-color:var(--red-500)}.button-red:hover{background-color:var(--red-600)}#load-config-label{font-weight:700;padding:.5rem 1rem;border-radius:.375rem;display:inline-flex;align-items:center;color:var(--white);cursor:pointer;transition:background-color .15s ease-in-out;line-height:1.25rem;background-color:var(--yellow-500)}#load-config-label:hover{background-color:var(--yellow-600)}#load-config-label i{margin-right:.5rem;height:1.25rem;width:1.25rem;vertical-align:middle}#load-config-input{display:none}#card-container{display:grid;gap:1rem;grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){#card-container{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){#card-container{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){#card-container{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1280px){#card-container{grid-template-columns:repeat(5,minmax(0,1fr))}}.card{background-color:var(--white);padding:1rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;word-wrap:break-word;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;cursor:grab;min-height:150px}.card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.card-favicon{width:32px;height:32px;object-fit:contain;margin-bottom:.5rem}.card-link{font-size:.875rem;font-weight:500;color:var(--indigo-600);text-decoration:none;margin-bottom:.25rem;overflow-wrap:break-word;word-break:break-all;max-width:100%}.card-link:hover{color:var(--indigo-800);text-decoration:underline}.card-description{font-size:.75rem;color:var(--gray-500);flex-grow:1;margin-bottom:.5rem;word-break:break-word}.card-delete-btn,.card-edit-btn{position:absolute;padding:.25rem;border-radius:9999px;border:none;background:0 0;cursor:pointer;color:var(--gray-400);display:flex;align-items:center;justify-content:center}.card-delete-btn{top:.25rem;right:.25rem}.card-edit-btn{bottom:.25rem;right:.25rem}.card-delete-btn:hover{color:var(--red-500)}.card-edit-btn:hover{color:var(--blue-500)}.card-delete-btn:focus,.card-edit-btn:focus{outline:0;box-shadow:0 0 0 2px var(--gray-300)}.card-delete-btn i,.card-edit-btn i{height:1rem;width:1rem;display:block}.world-clock-widget .widget-icon{height:2rem;width:2rem;color:var(--green-600);margin-bottom:.5rem}.world-clock-widget .timezone-text{font-size:.875rem;font-weight:500;color:var(--gray-700);margin-bottom:.25rem}.world-clock-widget .clock-time{font-size:1.125rem;font-weight:700;color:var(--gray-900)}.world-clock-widget .clock-date{font-size:.75rem;color:var(--gray-500)}.world-clock-widget.error-card{border:2px solid var(--red-500)}.mp3-player-widget{justify-content:flex-start}.mp3-player-widget .mp3-header{display:flex;align-items:center;width:100%;margin-bottom:.5rem;gap:.5rem}.mp3-player-widget .widget-icon{height:1.5rem;width:1.5rem;color:var(--purple-600);margin-bottom:0;flex-shrink:0}.mp3-player-widget .mp3-title{font-size:.875rem;font-weight:500;color:var(--gray-700);margin-bottom:0;word-break:break-all;flex-grow:1;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mp3-player-widget .mp3-refresh-button{background:0 0;border:none;padding:.1rem;margin:0;cursor:pointer;color:var(--gray-500);line-height:1;border-radius:9999px;flex-shrink:0}.mp3-player-widget .mp3-refresh-button:hover{color:var(--gray-800);background-color:var(--gray-200)}.mp3-player-widget .mp3-refresh-button i{width:.9rem;height:.9rem;display:block}.mp3-player-widget .mp3-content-container{flex-grow:1;max-height:150px;overflow-y:auto;width:100%;margin-top:.5rem;text-align:left;border-top:1px solid var(--gray-200);padding-top:.5rem}.mp3-player-widget .mp3-list{list-style:none;padding:0;margin:0 0 .5rem 0}.mp3-player-widget .mp3-list-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.8rem;cursor:default}.mp3-player-widget .mp3-list-item.playing .mp3-link-text{font-weight:600;color:var(--purple-700)}.mp3-player-widget .mp3-play-button{background:0 0;border:none;padding:0;margin:0;cursor:pointer;color:var(--purple-600);line-height:1;flex-shrink:0}.mp3-player-widget .mp3-play-button:hover{color:var(--purple-800)}.mp3-player-widget .mp3-play-button i{width:1em;height:1em;vertical-align:middle}.mp3-player-widget .mp3-link-text{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gray-800)}.mp3-player-widget audio{width:100%;margin-top:auto;display:block;flex-shrink:0}.mp3-player-widget .mp3-error,.mp3-player-widget .mp3-loading,.mp3-player-widget .mp3-message{font-size:.875rem;color:var(--gray-600);margin-top:1rem;font-style:italic;padding:0 .5rem}.mp3-player-widget .mp3-error{color:var(--red-600);font-style:normal;font-weight:500}footer{position:fixed;bottom:0;left:0;right:0;z-index:50;height:56px;background-color:var(--gray-800);color:var(--gray-300);font-size:.875rem;text-align:center;padding:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}footer a,footer button{color:var(--gray-300);text-decoration:underline;background:0 0;border:none;cursor:pointer;font-size:inherit}footer a:hover,footer button:hover{color:var(--white)}.modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5);align-items:center;justify-content:center}.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:80%;max-width:500px;border-radius:8px;position:relative;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.modal-close{color:#aaa;position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;cursor:pointer;line-height:1}.modal-close:focus,.modal-close:hover{color:#000;text-decoration:none}.modal-title{font-size:1.125rem;font-weight:600;margin-bottom:1rem}.modal-body{font-size:.875rem;color:var(--gray-700);max-height:15rem;overflow-y:auto;margin-bottom:1rem}.modal-body p{margin-bottom:.5rem}.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.form-group{margin-bottom:1rem}.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--gray-700);margin-bottom:.25rem}.form-input,.form-select{width:100%;padding:.5rem .75rem;border:1px solid var(--gray-300);border-radius:.375rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);font-size:1rem;line-height:1.5;background-color:var(--white)}.form-input:focus,.form-select:focus{outline:0;border-color:var(--indigo-500);box-shadow:0 0 0 1px var(--indigo-500)}.form-input[readonly]{background-color:var(--gray-100);cursor:not-allowed}.form-help-text{font-size:.75rem;color:var(--gray-500);margin-top:.25rem}#card-container::-webkit-scrollbar,.modal-body::-webkit-scrollbar,.mp3-content-container::-webkit-scrollbar{width:8px}#card-container::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track,.mp3-content-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}#card-container::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,.mp3-content-container::-webkit-scrollbar-thumb{background:#888;border-radius:10px}#card-container::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover,.mp3-content-container::-webkit-scrollbar-thumb:hover{background:#555}.sortable-ghost{opacity:.4;background-color:#cce7ff}.sortable-drag{opacity:1!important}