* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

 body { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); min-height: 100vh; padding: 20px; 
    display: flex; justify-content: center; align-items: center;}

 .container { width: 95%; max-width: 1200px; background: rgba(255, 255, 255, 0.95); border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); overflow: hidden;}
 header { background: linear-gradient(90deg, #2c3e50, #4a6491); color: white; padding: 25px;
    text-align: center; margin-bottom: 20px;}
 h1 { font-size: 2.8rem; margin-top: 10px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
 .subtitle { color: #7f8c8d; font-size: 1.2rem;}

 .program-container { display: flex; flex-direction: column; gap: 30px;}
 .program-card { background: white; border-radius: 10px; padding: 25px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;}
 .program-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);}
 .program-title { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-bottom: 20px;
     font-size: 1.5rem; display: flex; align-items: center;}
 .program-title::before { content: "📊"; margin-right: 10px; font-size: 1.2rem;}
 .program-description { color: #555; margin-bottom: 20px; font-size: 1rem; line-height: 1.7;}
 .code-block { background: #2d3748; color: #e2e8f0; padding: 20px; border-radius: 8px; overflow-x: auto; line-height: 1.5; 
    font-family: 'Courier New', monospace; margin-bottom: 20px; position: relative; border-left: 4px solid #3498db;}

 .copy-btn { position: absolute; top: 10px; right: 10px; background: #3498db; color: white; border: none;
     padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background 0.3s;
     display: flex; align-items: center; gap: 5px;}
 .copy-btn:hover { background: #2980b9;}
 .copy-btn::before { content: "📋";}
 .code-comment { color: #a0aec0;}
 .code-function { color: #68d391;}
 .code-variable { color: #fbb6ce;}
 .code-operator { color: #fed7d7;}
 .code-number { color: #f6ad55;}
 .code-string { color: #fefcbf;}

 .program-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px;}
 .tag { background: #edf2f7; color: #4a5568; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem;
     transition: background 0.3s;}
 .tag:hover { background: #e2e8f0;}

 .program-actions { display: flex; justify-content: flex-end; margin-top: 15px; gap: 10px;}

 .action-btn { background: transparent; border: 1px solid #3498db; color: #3498db; padding: 6px 12px; border-radius: 4px;
     cursor: pointer; font-size: 0.8rem; transition: all 0.3s;}
 .action-btn:hover { background: #3498db; color: white;}

 /* 底部区域 */
 .footer { background-color: #2c3e50; color: white; text-align: center; padding: 1rem 0; margin-top: 2rem;}
 .footer br{display: none;}

 @media (max-width: 768px) {
     
    body {padding: 0; }
    .container {  border-radius: 0; width: 100%;}

    header { padding: 15px;}
    h1 { font-size: 2.0rem; margin-top: 5px; margin-bottom: 5px; }
    h2 { font-size: 1.5rem;  margin-top: 20px; margin-bottom: 20px; }
    
    .program-card { padding: 15px;}
    .code-block { padding: 15px;} 

   .copy-btn { position: absolute; top: 8px; right: 8px; padding: 5px 5px; }
   /* 底部区域 */
  .footer br{display: block;}
  .footer .shuxian{display: none;}


 }