* {
    box-sizing: border-box;
  }


  body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    margin: 20px;
  }


  h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #222;
  }


  .table-container {
    max-width: 1000px;
    margin: 0 auto;
  }


  .periodic-table {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-auto-rows: minmax(60px, auto);
    gap: 4px;
    margin-bottom: 15px;
  }


  .element {
    background: white;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 4px;
    text-align: center;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
  }


  .element:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 10;
  }


  .number {
    font-size: 10px;
    font-weight: 600;
    color: #555;
    text-align: left;
  }


  .symbol {
    font-weight: 700;
    font-size: 20px;
    margin: 2px 0;
    line-height: 1;
  }


  .name {
    font-size: 8px;
    color: #666;
    margin: 0;
    line-height: 1.1;
  }


  .weight {
    font-size: 8px;
    color: #999;
    margin: 0;
  }


  .alkali { background-color: #F9D5B3; border-color: #E6A861; }
  .alkaline-earth { background-color: #FBC687; border-color: #E68A2E; }
  .transition { background-color: #A3C9F1; border-color: #5D9CE6; }
  .post-transition { background-color: #A7D49B; border-color: #5FB356; }
  .metalloid { background-color: #CEA2E6; border-color: #AC6DD6; }
  .nonmetal { background-color: #F9B3B3; border-color: #E66767; }
  .noble-gas { background-color: #80D3F9; border-color: #22A7F0; }
  .lanthanide { background-color: #F6C281; border-color: #F39C12; }
  .actinide { background-color: #F3A447; border-color: #E67E22; }


  .empty {
    background: transparent;
    border: none;
    cursor: default;
  }


  .series-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }


  .series {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 4px;
    width: calc(100% - 120px);
  }


  .series-label {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin: 10px 0 5px 0;
    grid-column: 1 / -1;
  }