.rubik-<uniquifier > {
  	font-family: "Rubik", sans-serif;
  	font-weight: <weight>;
  	font-style: normal;
  }

  .heebo-<uniquifier > {
  	font-family: "Heebo", sans-serif;
  	font-weight: <weight>;
  	font-style: normal;
  }

  body {
  	margin: 0;
  	padding: 0;
  	background: #FFF4E9;

  }

  h2 {
  	font-size: 1.8em;
  	font-family: "Rubik", serif;
  	color: #004D5B;
  	text-shadow: 0 1px 1px #9FC1CC;
  }

  h3 {
  	font-size: 1.3em;
  	margin-bottom: 0px;
  	text-align: justify-all;
  	border-radius: 9px;
  	font-family: "Heebo", serif;
  	color: #9FC1CC;
  	text-shadow: 0 2px 2px #FFF4E9;
  }

  h4 {
  	font-size: 1em;
  	margin: auto auto;
  	text-align: justify;
  	border-radius: 9px;
  	font-family: "Rubik", serif;
  	margin-bottom: 15px;
  	color: #004D5B;
  	text-shadow: 0 2px 2px#FFF4E9;
  }



  /*Back*/
  .back-home-btn {
  	position: fixed;
  	z-index: 1001;
  	background: #E3F2FD;
  	color: #9FC1CC;
  	text-decoration: none;
  	border-radius: 10px;
  	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  	transition: all 0.3s ease;

  	@media (max-width: 768px) {
  		top: 10px;
  		left: 10px;
  		padding: 6px 12px;
  		font-size: 12px;
  	}
  }

  .back-home-btn:hover {
  	background: #FFF4E9;
  	transform: translateY(-2px);
  	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  /*Tab*/
  .tab {
  	position: fixed;
  	bottom: 0;
  	width: 100%;
  	height: 60px;
  	display: flex;
  	background: #E3F2FD;
  	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  	border-radius: 12px;
  	font-family: "Heebo", serif;
  }

  .tab button {
  	flex: 1;
  	border: none;
  	background: none;
  	padding: 12px;
  	font-size: 14px;
  	color: #004D5B;
  	transition: all 0.3s;
  }

  .tab button.active {
  	color: #004D5B;
  	border-bottom: 3px solid #004D5B;
  }

  .tabcontent {
  	padding: 20px;
  	padding-bottom: 80px;
  	min-height: 83vh;
  	background: linear-gradient(15deg, #9FC1CC 0%, #FFF4E9 100%);
  }

  /*Board*/
  /*Start of code from Board*/
  .board {
  	left: 0;
  	width: 100%;
  	opacity: 90%;
  	max-height: 630px;
  	justify-content: center;
  	align-items: center;
  	margin-bottom: 15px;
  	overflow: hidden;
  	position: relative;
  }

  .board-content {
  	background: #E3F2FD;
  	padding: 1rem;
  	border-radius: 8px;
  	height: 100%;
  	width: 80%;
  	max-width: 500px;
  	position: relative;
  	animation: slideIn 0.3s ease-out;

  }

  .board-content1 {
  	height: 100%;
  	overflow-y: auto;
  	padding-right: 8px;
  	overflow-y: auto;
  	padding-right: 6px;
  }


  .action-btns {
  	width: 90%;
  	padding: 10px;
  }

  .close-btn {
  	position: absolute;
  	top: 1rem;
  	right: 1rem;
  	font-size: 1.5rem;
  	cursor: pointer;
  }

  @keyframes slideIn {
  	from {
  		transform: translateY(-50px);
  		opacity: 0;
  	}

  	to {
  		transform: translateY(0);
  		opacity: 1;
  	}
  }

  /*Ends of code from Board*/

  /* TO-Pack board text */
  .open-btn {
  	border: none;
  	padding: 5px;
  	width: 100%;
  	text-align: center;
  	margin: auto;
  	margin-bottom: 10px;
  	border-radius: 20px;
  	padding: 25px;
  	text-shadow: 0 4px 2px #FFF4E9;
  	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  }

  .packing-list {
  	background: white;
  	border-radius: 12px;
  	padding: 15px;
  	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .list-item {
  	flex-grow: 1;
  	margin: 0 12px;
  }

  .checkmark {
  	width: 20px;
  	height: 20px;
  	border: 2px solid #dee2e6;
  	border-radius: 5px;
  	margin-right: 15px;
  }

  /*Start of code from Input*/
  /*Input */
  .item-input {
  	width: 90%;
  	padding: 12px;
  	margin: 15px 0;
  	border: 2px solid #dee2e6;
  	border-radius: 8px;
  	font-size: 16px;
  }

  /* btn */
  .btn-confirm {
  	width: 100%;
  	padding: 12px;
  	background: #FFF4E9;
  	color: #9FC1CC;
  	border: none;
  	border-radius: 8px;
  	cursor: pointer;
  	transition: background 0.3s;
  }

  .btn-confirm:hover {
  	background: #E3F2FD;
  }

  /*Ends of code from Input*/

  .category-title {
  	cursor: pointer;
  	display: flex;
  	align-items: center;
  	gap: 8px;
  	user-select: none;
  	transition: all 0.3s ease;
  }

  .category-title:hover {
  	color: #004D5B;
  }

  .toggle-icon {
  	font-size: 1em;
  	transition: transform 0.3s ease;
  	padding: 8px;
  }

  .category-items {
  	max-height: 0;
  	overflow: hidden;
  	transition: max-height 0.3s ease-out;
  }

  .category-items.expanded {
  	max-height: 500px;

  }

  @keyframes itemAppear {
  	from {
  		opacity: 0;
  		transform: translateY(-10px);
  	}

  	to {
  		opacity: 1;
  		transform: translateY(0);
  	}
  }

  .new-item {
  	animation: itemAppear 0.3s ease-out;
  }

  /* wather */
  .weather-page {
  	padding: 20px;
  	background: linear-gradient(135deg, #9FC1CC 0%, #B8E0D2 100%);
  	min-height: calc(100vh - 80px);
  }

  .search-container {
  	background: #E3E0CC;
  	border-radius: 20px;
  	padding: 18px;
  	color: #004D5B;
  	box-shadow: 0 2px 33px rgba(31, 38, 135, 0.15);
  	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  }

  .current-weather {
  	background: rgba(255, 255, 255, 0.9);
  	border-radius: 20px;
  	padding: 25px;
  	margin-bottom: 30px;
  	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  }

  .current-main {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	align-items: center;
  }

  .temp-display {
  	font-family: 'Heebo', sans-serif;
  	font-size: 4rem;
  	color: #004D5B;
  	line-height: 1;
  }

  .weather-icon {
  	font-size: 3.5rem;
  	text-align: right;
  }

  /*Start of code from weekly-forcast*/
  .weekly-forecast {
  	display: flex;
  	flex-direction: column;
  	gap: 12px;
  }

  .day-card {
  	background: rgba(255, 255, 255, 0.9);
  	border-radius: 15px;
  	padding: 15px;
  	display: grid;
  	grid-template-columns: 1fr 2fr 1fr;
  	align-items: center;
  }

  .day-name {
  	font-family: 'Heebo', sans-serif;
  	color: #004D5B;
  	font-size: 1.1em;
  }

  /*Ends of code from weekly-forcast*/

  .condition-icon {
  	text-align: center;
  	font-size: 1.8rem;
  }

  .temp-range {
  	text-align: right;
  	color: #9FC1CC;
  	font-family: 'Heebo', sans-serif;
  }

  .mobile-category {
  	padding-bottom: 8px;
  	max-height: 47.5vh;
  	overflow-y: auto;
  	padding-right: 6px;
  }

  .category-header {
  	border-radius: 10px;
  	margin: auto;
  	align-items: center;
  	padding: 1px;
  	background: #F8FAFC;
  	/* 	width: 90%;*/
  	color: #004D5B;
  	box-shadow: 0 2px 8px rgba(31, 38, 135, 0.15);
  }

  .mobile-item-list {
  	margin: 0;
  	padding: 0;
  	list-style: none;
  }



  .drag-handle {
  	font-size: 1.2rem;
  	color: #9FC1CC;
  }

  .item-card {
  	display: flex;
  	align-items: center;
  	padding: 12px;
  	border-bottom: 1px solid #EDF2F7;
  }

  .item-text {
  	flex-grow: 1;
  	margin: 0 12px;
  }

  .item-menu {
  	color: #004D5B;
  	padding: 8px;
  }


  #pickitems {
  	margin-top: 8px;
  	padding: 0 10px;
  }

  /* 物品容器样式 */
  .items-container {
  	margin: 20px 0;
  	background: white;
  	border-radius: 12px;
  	box-shadow: 0 22px 8px rgba(0, 0, 0, 0.1);
  }

  .list-item {
  	display: flex;
  	align-items: center;
  	padding: 15px;
  	border-bottom: 1px solid #eee;
  	animation: itemAppear 0.3s ease-out;
  }

  .list-item:last-child {
  	border-bottom: none;
  }

  .checkbox-container {
  	display: flex;
  	align-items: center;
  	flex-grow: 1;
  }

  .item-text {
  	margin-left: 15px;
  	font-size: 16px;
  	color: #004D5B;
  }

  .item-menu {
  	background: none;
  	border: none;
  	font-size: 1.2rem;
  	color: #9FC1CC;
  	padding: 5px;
  }

  .mobile-item-list {
  	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  	gap: 10px;
  	padding: 10px;
  }

  .item-card {
  	background: #FFF4E9;
  	border-radius: 8px;
  	padding: 12px;
  	box-shadow: 0 2px 4px rgba(0, 77, 91, 0.1);
  }

  .checkbox-container {
  	display: flex;
  	align-items: center;
  	gap: 12px;
  }

  .item-text {
  	font-family: 'Heebo', sans-serif;
  	color: #004D5B;
  	font-size: 14px;
  }

  @keyframes slideDown {
  	from {
  		transform: translateY(-20 px);
  		opacity: 0;
  	}

  	to {
  		transform: translateY(0);
  		opacity: 1;
  	}
  }

  @keyframes slideUp {
  	from {
  		transform: translateY(0);
  		opacity: 1;
  	}

  	to {
  		transform: translateY(-20 px);
  		opacity: 0;
  	}
  }

  /* anmi */
  @keyframes itemDisappear {
  	from {
  		opacity: 1;
  		transform: translateY(0);
  	}

  	to {
  		opacity: 0;
  		transform: translateY(-10px);
  	}
  }

  /* Pick list */
  .items-container .list-item {
  	background: white;
  	margin: 5px 0;
  	border-radius: 8px;
  	padding: 12px;
  	box-shadow: 0 2px 4px rgba(0, 77, 91, 0.1);
  }

  .checkbox-container {
  	display: flex;
  	align-items: center;
  	gap: 12px;
  }

  /*Sounds*/
  /* 添加语音按钮样式 */
  .voice-btn {
  	background: #FFF4E9;
  	border: 2px solid #9FC1CC;
  	border-radius: 18px;
  	padding: 8px 15px;
  	color: #004D5B;
  	cursor: pointer;
  	transition: all 0.3s;
  	margin-left: 10px;
  }

  .voice-btn:hover {
  	background: #E3F2FD;
  	transform: translateY(-2px);
  }

  .voice-icon {
  	margin-right: 5px;
  }

  /* 语音加载动画 */
  @keyframes pulse {
  	0% {
  		opacity: 1;
  	}

  	50% {
  		opacity: 0.5;
  	}

  	100% {
  		opacity: 1;
  	}
  }

  .loading-voice {
  	animation: pulse 1.5s infinite;
  }