* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0; padding: 0;
  background-color: var(--background-color); color: var(--text-color);
  line-height: 1.6;
  display: flex; flex-direction: column; min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: auto; position: relative;
}

canvas#starCanvas {
  position: fixed; top: 0; left: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none; opacity: 1; transition: opacity 0.5s ease;
}
body.light-mode canvas#starCanvas { opacity: 0; visibility: hidden; }

:root{
  --primary-color:#007bff;
  --primary-color-rgb:0,123,255;
  --secondary-color:#6c757d;
  --background-color:#f8f9fa;
  --card-background:#ffffff;
  --border-color:#dee2e6;
  --text-color:#343a40;
  --heading-color:#212529;

  --button-bg:var(--primary-color);
  --button-hover:#0056b3;
  --button-text:#ffffff;
  --delete-button-color:#dc3545;

  --shadow:0 4px 8px rgba(0,0,0,0.05);

  --indicator-dst-bg:#d1ecf1;
  --indicator-dst-text:#0c5460;
  --indicator-business-bg:#d4edda;
  --indicator-business-text:#155724;
  --indicator-non-business-bg:#f8d7da;
  --indicator-non-business-text:#721c24;

  --input-bg:#ffffff;
  --input-border:#ced4da;
  --input-text:var(--text-color);

  --hover-background:rgba(0,0,0,0.04);
  --accent-color:#007bff;
  --text-secondary:#6c757d;
}

body.dark-mode{
  --gradient-bg:#1e1e1e;
  --gradient-header:linear-gradient(135deg,#2a2a2a,#1e1e1e);
  --gradient-btn:linear-gradient(135deg,#3a3f51,#2c2f3a);
  --gradient-btn-hover:linear-gradient(135deg,#4b5168,#343845);
  --hover-glow:0 0 25px rgba(0,200,255,0.6);
  --error:#ff4e42;

  --primary-color:#00c8ff;
  --primary-color-rgb:0,200,255;
  --secondary-color:#adb5bd;
  --background-color:var(--gradient-bg);
  --card-background:rgb(20,20,20);
  --border-color:rgba(255,255,255,0.08);
  --text-color:#f5f5f5;
  --heading-color:#f5f5f5;

  --button-bg:var(--gradient-btn);
  --button-hover:var(--gradient-btn-hover);
  --button-text:#fff;
  --delete-button-color:var(--error);

  --shadow:0 12px 24px rgba(0,0,0,0.5);

  --indicator-dst-bg:rgba(255,255,100,0.2);
  --indicator-dst-text:#ffe066;
  --indicator-business-bg:rgba(100,255,100,0.2);
  --indicator-business-text:#90ee90;
  --indicator-non-business-bg:rgba(255,100,100,0.2);
  --indicator-non-business-text:#ff8080;

  --input-bg:#444;
  --input-border:#555;
  --input-text:#f5f5f5;
}

body.light-mode{
  background:linear-gradient(135deg,#e0f2f7,#bbdefb,#90caf9,#64b5f6);
  background-size:200% 200%;
  animation:bodyGradientAnimation 25s ease infinite alternate;
}
@keyframes bodyGradientAnimation{
  0%{background-position:0% 0%;}
  100%{background-position:100% 100%;}
}
.bubbles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none;}
.bubble{
  position:absolute;bottom:-100px;background-color:rgba(0,0,0,0.05);border-radius:50%;
  animation:floatUp 15s ease-in-out infinite;opacity:0;
}
@keyframes floatUp{
  0%{transform:translateY(0) scale(0.5);opacity:0;}
  20%{opacity:1;}
  100%{transform:translateY(-100vh) scale(1.2);opacity:0;}
}

main{
  display:grid; gap:20px; max-width:1200px; margin:0 auto; padding:0 20px; flex-grow:1;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); justify-content:center;
}
.card{
  background-color:var(--card-background);
  border-radius:20px; padding:25px; box-shadow:var(--shadow); border:1px solid var(--border-color);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;
  text-align:center; position:relative;
}
.card h2{
  color:var(--heading-color); font-size:1.5em; margin:0 0 20px; padding-bottom:10px; border-bottom:1px solid var(--border-color);
  transition:color 0.3s ease,border-color 0.3s ease; display:inline-block;
}
.selected-timezones{ grid-column:1 / -1; }

#themeToggle,#settingsToggle{
  position:fixed; right:20px; z-index:9999;
  width:40px; height:40px; padding:10px 15px; background:none;
  border:1px solid var(--secondary-color); color:var(--secondary-color);
  border-radius:50%; font-size:1.2em; cursor:pointer; display:flex; align-items:center; justify-content:center;
  outline-offset:3px; transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}
#themeToggle{ top:20px; }
#settingsToggle{ top:70px; }
#themeToggle i,#settingsToggle i{ width:1em;height:1em;line-height:1; }
#themeToggle:hover,#settingsToggle:hover{ background-color:rgba(108,117,125,0.1); }
body.dark-mode #themeToggle:hover,body.dark-mode #settingsToggle:hover{ background-color:rgba(0,200,255,0.1); }
#themeToggle:focus-visible,#settingsToggle:focus-visible{ outline:2px solid var(--primary-color); outline-offset:2px; }

body.light-mode #themeToggle, body.light-mode #settingsToggle{
  color:#111; border-color:#555; background-color:rgba(255,255,255,0.4);
}
body.light-mode #themeToggle:hover, body.light-mode #settingsToggle:hover{ background-color:rgba(0,0,0,0.05); }

.app-header-area{
  grid-column:1 / -1;
  display:flex; justify-content:center; align-items:center;
  flex-direction:column;
  gap:6px;
  padding:20px 0; margin-bottom:20px;
}
.app-header-area h1{
  margin:0; text-align:center; font-size:2.2em; color:var(--heading-color);
  transition:color 0.3s ease,text-shadow 0.3s ease;
}
body.dark-mode .app-header-area h1{ text-shadow:0 0 10px rgba(0,200,255,0.6); }
body.light-mode .app-header-area h1{ text-shadow:1px 1px 2px rgba(0,0,0,0.4); }

.app-tagline{
  display:block; text-align:center; font-size:1.1em; font-weight:400;
  color:var(--secondary-color); margin-top:4px;
}

.local-time-section{ grid-column:span 2; text-align:center; }
.time-display,#localTimeDisplay{ font-size:2.5em; font-weight:bold; color:var(--primary-color); margin-bottom:5px; transition:color 0.3s ease; }
.large-time{ font-size:3.5em; }
.timezone-name,#localTimezoneName{ font-size:1.1em; color:var(--secondary-color); transition:color 0.3s ease; }
.clickable-status{ cursor:pointer; font-weight:bold; }

.input-group{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.search-input-wrapper{ position:relative; width:100%; max-width:300px; }

#timezoneSearchInput,#referenceDatetimeInput,select{
  flex-grow:1; padding:14px; border:1px solid var(--input-border); border-radius:12px; font-size:1rem;
  color:var(--input-text); background-color:var(--input-bg);
  min-width:180px; width:100%; max-width:300px; text-align:center;
  transition:border-color 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}
.search-input-wrapper #timezoneSearchInput{ margin-bottom:0; }
#timezoneSearchInput:focus,#referenceDatetimeInput:focus,select:focus{
  outline:none; border-color:var(--primary-color);
  box-shadow:0 0 0 0.3rem rgba(0,200,255,0.3);
}
body.light-mode #timezoneSearchInput:focus,body.light-mode #referenceDatetimeInput:focus,body.light-mode select:focus{
  box-shadow:0 0 0 0.3rem rgba(0,123,255,0.3);
}

.input-group button,#openMeetingPlannerBtn{
  padding:15px 50px; border:none; border-radius:12px; cursor:pointer; font-size:1em; font-weight:bold;
  transition:transform 0.2s ease, background 0.3s ease; outline-offset:3px;
  background:var(--button-bg); color:var(--button-text);
  width:100%; max-width:300px;
}
.input-group button{ margin-top:5px; }
#openMeetingPlannerBtn{ margin-top:20px; }
.input-group button:hover,#openMeetingPlannerBtn:hover{ background:var(--button-hover); transform:scale(1.05); }

#setReferenceToCurrentBtn.button-set-mode{ background-color:var(--button-bg); color:var(--button-text); background-image:var(--button-bg); }
#setReferenceToCurrentBtn.button-reset-mode{ background-image:linear-gradient(135deg,#b22222,#8b0000); color:var(--button-text); }

.explanation,.drag-hint{ font-size:0.9em; color:var(--secondary-color); transition:color 0.3s ease; }
.explanation{ margin-top:20px; margin-bottom:5px; }
.drag-hint{ font-size:0.8em; margin-left:10px; font-weight:normal; }

#timezoneSuggestions{
  position:absolute; top:calc(100% + 5px); left:0; width:100%; max-width:none;
  background-color:var(--card-background); border:1px solid var(--border-color); border-radius:8px;
  box-shadow:var(--shadow); z-index:10; max-height:200px; overflow-y:auto; display:none; text-align:left; padding:5px 0;
}
.timezone-suggestion-group-header{
  padding:10px 15px; font-weight:bold; color:var(--heading-color);
  background-color:var(--border-color); border-bottom:1px solid var(--border-color);
  margin-bottom:5px; font-size:0.9em; position:sticky; top:0; z-index:11; text-align:center;
}
body.dark-mode .timezone-suggestion-group-header{ background-color:rgba(40,40,40,0.8); color:var(--primary-color); }
.timezone-suggestion-item{
  padding:10px 15px; cursor:pointer; color:var(--text-color);
  transition:background-color 0.2s ease, color 0.2s ease;
}
.timezone-suggestion-item:hover,.timezone-suggestion-item.selected{
  background-color:var(--primary-color); color:var(--button-text);
}

.reset-button{
  padding:3px; margin-left:8px; border:none; border-radius:2px; font-size:1rem;
  color:var(--button-text); background-image:linear-gradient(135deg,#b22222,#8b0000);
  width:100%; max-width:70px; min-width:50px; cursor:pointer; transition:transform 0.2s ease; text-align:center;
}
.reset-button:hover{ transform:scale(1.05); }

.clicked{ transform:scale(0.97); box-shadow:0 0 5px var(--accent-color, #3399ff); transition:transform 0.1s ease, box-shadow 0.1s ease; }

#timezoneCardsContainer{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px; min-height:100px; align-content:start;
}

.timezone-card{
  background-color:var(--card-background);
  border-radius:20px; padding:20px; box-shadow:var(--shadow);
  border:1px solid var(--border-color);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden; cursor:grab; text-align:center; outline-offset:3px;
  transition:transform 0.2s ease, opacity 0.2s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.timezone-card:active{ cursor:grabbing; }
.timezone-card:focus-visible{ outline:none; }

.timezone-card:hover,
.timezone-card:focus-visible{
  box-shadow:
    0 12px 28px rgba(0,0,0,0.12),
    0 0 0 3px rgba(var(--primary-color-rgb), 0.35);
}

.timezone-card.filtered-out {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}
.timezone-card.filtered-out:hover {
  box-shadow: var(--shadow);
}
.selected-timezones.is-filtered .drag-hint {
  display: none;
}

.sortable-ghost {
  opacity: 0.4;
  background: rgba(var(--primary-color-rgb), 0.15);
}

.timezone-card.dragging{
  opacity: 0.9;
  transform:scale(0.98) rotate(0.2deg);
  box-shadow:
    0 16px 32px rgba(0,0,0,0.2),
    0 0 0 3px rgba(var(--primary-color-rgb), 0.5);
  border:1px solid transparent;
}

.timezone-card.animating{
  transition: transform 200ms cubic-bezier(.2,.7,.3,1);
}

.timezone-card.placeholder{
  background:
    repeating-linear-gradient(
      45deg,
      rgba(var(--primary-color-rgb), 0.06),
      rgba(var(--primary-color-rgb), 0.06) 8px,
      transparent 8px,
      transparent 16px
    );
  border:2px dashed var(--primary-color);
  border-radius:20px;
  box-shadow:0 0 0 3px rgba(var(--primary-color-rgb),0.15) inset;
}

.timezone-card.fade-in{ animation:fadeIn 0.3s ease-out forwards; }
.timezone-card.fade-out{ animation:fadeOut 0.3s ease-in forwards; pointer-events:none; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeOut{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(20px);} }

.timezone-card .delete-btn{
  position:absolute; top:10px; right:10px; background:none; border:none; color:var(--delete-button-color);
  font-size:1.5em; cursor:pointer; line-height:1; padding:0; outline-offset:3px; transition:color 0.2s ease, transform 0.1s ease;
}
.timezone-card .delete-btn i{ width:1em;height:1em; }
.timezone-card .delete-btn:hover{ color:#a01f2c; transform:scale(1.1); }
body.dark-mode .timezone-card .delete-btn:hover{ color:#ff9191; }
.timezone-card .delete-btn:focus-visible{ outline:2px solid var(--delete-button-color); }

.timezone-card h3{
  margin:0 0 10px; color:var(--heading-color); font-size:1.3em; padding-right:30px;
  display:inline-block; transition:color 0.3s ease;
}
.timezone-card .time-display{ font-size:2em; color:var(--primary-color); margin-bottom:5px; }
.timezone-card .date-display{ font-size:0.9em; color:var(--secondary-color); margin-bottom:10px; }
.timezone-info{ font-size:0.9em; color:var(--secondary-color); margin-bottom:10px; transition:color 0.3s ease; }

.timezone-indicators{ display:flex; gap:8px; justify-content:center; margin-top:10px; font-size:0.85em; }
.indicator{ padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:5px; font-weight:bold; transition:background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; }
.indicator.dst{ background-color:var(--indicator-dst-bg); color:var(--indicator-dst-text); }
.indicator.business-hours{ background-color:var(--indicator-business-bg); color:var(--indicator-business-text); }
.indicator.non-business-hours{ background-color:var(--indicator-non-business-bg); color:var(--indicator-non-business-text); }
.indicator:hover{ transform:scale(1.05); }

#localTimezoneIndicators .indicator {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#localTimezoneIndicators .indicator:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#localTimezoneIndicators .indicator.active-filter {
  box-shadow: 0 0 0 3px var(--primary-color);
  transform: translateY(-2px);
}
body.dark-mode #localTimezoneIndicators .indicator:hover {
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

#noTimezonesMessage{ text-align:center; grid-column:1 / -1; color:var(--secondary-color); padding:20px; font-style:italic; transition:color 0.3s ease; }

.card-label-wrapper{ display:inline-flex; align-items:baseline; justify-content:center; margin-bottom:10px; }
.edit-label-btn{
  background:none; border:none; cursor:pointer; color:var(--secondary-color); font-size:0.95em; padding:0; line-height:1;
  vertical-align:middle; position:relative; top:-1px; transition:color 0.2s ease, transform 0.2s ease;
}
.edit-label-btn:hover{ color:var(--heading-color); transform:scale(1.1); }
.edit-label-btn:focus-visible{ outline:2px solid var(--heading-color); border-radius:4px; }
.editable-label{ display:inline-block; width:75%; text-align:center !important; }
.editable-label[contenteditable="true"]{ display:block; }

.notification-message{
  display:block; height:0; font-size:1em; text-align:center; color:var(--button-text);
  transform:scaleY(0); transform-origin:top; opacity:0; padding:0;
  transition:opacity 0.6s ease-out, transform 0.6s ease-out, padding-top 0.6s ease-out, padding-bottom 0.6s ease-out;
  will-change:transform, opacity, padding;
}
.notification-message.success{ color:var(--indicator-business-text); }
.notification-message.info{ color:var(--indicator-dst-text); }
.notification-message.error{ color:var(--indicator-non-business-text); }
.notification-message.show{ height:50px; transform:scaleY(1); padding-top:10px; padding-bottom:10px; opacity:1; }

.settings-modal{
  display:none; position:fixed; z-index:1000; inset:0; overflow:auto;
  background-color:rgba(0,0,0,0.4); justify-content:center; align-items:center; padding:20px; box-sizing:border-box;
}
.settings-modal-content{
  background-color:var(--card-background); margin:auto; padding:30px; border-radius:10px; box-shadow:var(--shadow);
  width:90%; max-width:600px; position:relative; animation:fadeInSettings 0.3s ease-out; display:flex; flex-direction:column; gap:20px;
}
@keyframes fadeInSettings{ from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }

.settings-modal .close-button{
  position:absolute; top:15px; right:20px; font-size:28px; font-weight:bold; background:none; border:none; color:var(--secondary-color);
  cursor:pointer; transition:color 0.3s ease;
}
.settings-modal .close-button:hover,.settings-modal .close-button:focus{ color:var(--primary-color); outline:none; }

.settings-modal h2{
  color:var(--heading-color); font-size:1.8em; margin-top:0; margin-bottom:20px; text-align:center;
  border-bottom:1px solid var(--border-color); padding-bottom:10px;
}

.settings-options{ display:flex; flex-direction:column; gap:15px; }
.setting-item{ background-color:var(--input-bg); border:1px solid var(--input-border); border-radius:8px; padding:15px; text-align:left; }
.setting-item h3{ margin-top:0; margin-bottom:10px; color:var(--primary-color); font-size:1.2em; }
.setting-item p{ font-size:0.9em; color:var(--text-color); }

.radio-group{ display:flex; flex-direction:column; gap:0.5rem; }
.format-option{
  display:flex; align-items:center; gap:0.6rem; padding:0.4rem; border-radius:6px; cursor:pointer; transition:background-color 0.3s ease;
}
.format-option:hover{ background-color:var(--hover-background); }
.format-option input[type="radio"]:checked + .icon i{ color:var(--accent-color); animation:confirmPulse 0.4s ease; }
@keyframes confirmPulse{ 0%{transform:scale(1);} 50%{transform:scale(1.4);} 100%{transform:scale(1);} }
.format-option .example{ font-size:0.85em; color:var(--text-secondary); }

#timezoneSyncInterval{ font-size:0.85rem; padding:4px 8px; width:auto; min-width:120px; border-radius:6px; }

#timezoneCardsContainer{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px; min-height:100px; align-content:start;
}

.meeting-planner-modal{
  display:none; position:fixed; z-index:1000; inset:0; overflow:auto;
  background-color:rgba(0,0,0,0.4); justify-content:center; align-items:center; padding:20px; box-sizing:border-box;
}
.meeting-planner-content{
  background-color:var(--card-background); margin:auto; padding:30px; border-radius:10px; box-shadow:var(--shadow);
  width:90%; max-width:1000px; position:relative; animation:fadeInPlanner 0.3s ease-out; display:flex; flex-direction:column; gap:20px;
}
@keyframes fadeInPlanner{ from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }

.close-button{
  position:absolute; top:15px; right:20px; font-size:28px; font-weight:bold; background:none; border:none; color:var(--secondary-color);
  cursor:pointer; padding:0; transition:color 0.2s ease;
}
.close-button:hover,.close-button:focus{ color:var(--delete-button-color); }

.meeting-planner-content h2{ color:var(--heading-color); margin:0; padding-bottom:10px; border-bottom:1px solid var(--border-color); }

.meeting-planner-controls{
  display:flex; flex-direction:column; align-items:flex-start; gap:15px; flex-wrap:wrap; justify-content:center;
}
.meeting-controls-row{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; justify-content:flex-start; }
.meeting-controls-row.meeting-time-interval-row{ flex-wrap:nowrap; }

.meeting-planner-controls label{ font-weight:bold; color:var(--text-color); white-space:nowrap; }
.meeting-planner-controls input[type="date"],
.meeting-planner-controls input[type="number"],
.meeting-planner-controls select{
  text-align:center; padding:10px 15px; border:1px solid var(--input-border); border-radius:5px; font-size:1em;
  color:var(--input-text); background-color:var(--input-bg); outline:none; min-width:180px; box-sizing:border-box;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.meeting-planner-controls input:focus,
.meeting-planner-controls select:focus{ border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(0,123,255,0.25); }

#meetingTimeGrid{
  display:grid; grid-template-columns:max-content repeat(48, minmax(70px,1fr)); gap:1px;
  border:1px solid var(--border-color); border-radius:8px; background-color:var(--border-color);
  overflow-x:auto; margin-top:20px; position:relative; padding-bottom:10px;
}
#meetingTimeGrid.active-drag{ cursor:grabbing; }

.grid-row{ display:contents; }
.grid-cell{
  padding:10px 5px; border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:center; font-size:0.9em; text-align:center; white-space:nowrap;
}
.grid-cell:last-child{ border-right:none; }
.grid-row:last-of-type .grid-cell{ border-bottom:none; }

.grid-header .grid-cell{ font-weight:bold; background-color:var(--background-color); position:sticky; top:0; z-index:20; }
.grid-header .hour-label{ background-color:var(--card-background); }

.timezone-label{
  background-color:var(--background-color); font-weight:bold; text-align:left; padding-left:10px;
  position:sticky; left:0; z-index:10; color:var(--heading-color); min-width:80px; white-space:nowrap; overflow:visible;
}
.grid-header .timezone-label{ top:0; left:0; z-index:25; }

.time-slot{ background-color:var(--card-background); cursor:pointer; transition:background-color 0.2s ease; }
.time-slot:hover{ background-color:rgba(var(--primary-color-rgb),0.1); }

.grid-cell.business-hour{ background-color:var(--indicator-business-bg); }
.grid-cell.non-business-hour{ background-color:var(--indicator-non-business-bg); }

.meeting-block{
  position:absolute; background-color:var(--primary-color); color:var(--button-text); opacity:0.8; border-radius:4px; cursor:grab;
  z-index:30; font-weight:bold; font-size:0.9em; padding:0 5px; white-space:nowrap; display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; transition:left 0.1s ease-out, width 0.1s ease-out, opacity 0.2s ease;
}
.meeting-block-stripe{ position:absolute; top:0; left:0; height:45px; width:100%; z-index:-1; border-top-left-radius:4px; border-top-right-radius:4px; opacity:1; }
.meeting-block-stripe.business-hour{ background-color:#88eec8; }
.meeting-block-stripe.non-business-hour{ background-color:#b94a4a; }
.meeting-block.dragging{ cursor:grabbing; opacity:0.5; }

.legend{ display:flex; justify-content:center; gap:20px; margin-top:20px; font-size:0.9em; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; }
.legend-item::before{ content:''; display:inline-block; width:20px; height:20px; margin-right:8px; border-radius:4px; }
.legend-item.business-hours::before{ background-color:var(--indicator-business-bg); }
.legend-item.non-business-hours::before{ background-color:var(--indicator-non-business-bg); }
.legend-item.selected-meeting-time::before{ background-color:var(--primary-color); opacity:0.7; }

.meeting-time-grid{ user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.meeting-legend-description{ margin:5px; font-size:0.85rem; color:var(--text-muted,#666); line-height:1.4; max-width:auto; }

.app-footer {
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
  color: var(--secondary-color);
  font-size: 0.9em;
  border-top: 1px solid var(--border-color);
  width: 100%;
}

.app-footer p {
  margin: 0.5em 0;
}

@media (max-width:768px){
  #themeToggle{ top:15px; right:15px; width:35px; height:35px; font-size:1.1em; }
  main{ grid-template-columns:1fr; }
  .app-header-area{ align-items:center; text-align:center; padding-top:60px; }
  .app-header-area h1{ margin-bottom:0; }

  .local-time-section,.add-timezone-section,.reference-time-section,.selected-timezones{ grid-column:auto; }
  .input-group{ flex-direction:column; align-items:stretch; }
  .search-input-wrapper{ max-width:100%; }

  .input-group #timezoneSearchInput,.input-group #referenceDatetimeInput,select,.input-group button{ max-width:100%; width:100%; }
  .input-group button{ margin-top:10px; }

  .time-display.large-time{ font-size:2.8em; }
  #timezoneSuggestions{ width:100%; left:0; transform:none; }

  .meeting-planner-content{ width:95%; padding:20px; }
  .meeting-planner-controls{ flex-direction:column; align-items:stretch; }

  #meetingTimeGrid{ grid-template-columns:100px repeat(24,1fr); }
}

@media (max-width:480px){
  h1{ font-size:1.5em; }
  #themeToggle{ width:40px; height:40px; font-size:1.2em; }
  .time-display{ font-size:2em; }
  .large-time{ font-size:2.5em; }
  .notification-message{ width:90%; left:5%; transform:translateX(0); }
}