:root{
      --bg:#0b0f14; --fg:#e6edf3; --muted:#9aa4af; --accent:#7c9cff; --danger:#ff6b6b; --ok:#2dd4bf; --card:#111827;
    }
    html,body{height:100%;}
    body{margin:0;background:linear-gradient(180deg,#0b0f14,#0a0d12);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans JP",Arial,"Apple Color Emoji","Segoe UI Emoji";}
    .container{max-width:900px;margin:0 auto;padding:20px;}
    .card{background:var(--card);border:1px solid #222b36;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:18px;}
    h1{font-size:clamp(18px,2.6vw,28px);margin:0 0 8px;}
    .muted{color:var(--muted);font-size:14px}
    .row{display:flex;gap:12px;flex-wrap:wrap}
    .field{flex:1 1 200px;display:flex;flex-direction:column;gap:6px}
    label{font-size:13px;color:var(--muted)}
    input,select{background:#0e141b;border:1px solid #243043;color:var(--fg);border-radius:12px;padding:12px;outline:none}
    input:focus,select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}
    .grid{display:grid;grid-template-columns:1fr;gap:16px}
    .timer{font-variant-numeric:tabular-nums;letter-spacing:1px;text-align:center;font-weight:700}
    .time {font-size: min(25vw, 200px); line-height: 1;}
    .time-sub {font-size: min(10vw, 80px);  opacity: .9;}
    .pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#101826;border:1px solid #1f2a37;padding:6px 10px;color:var(--muted);font-size:12px}
    .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
    button{cursor:pointer;border:none;border-radius:12px;padding:12px 16px;font-weight:600}
    .primary{background:var(--accent);color:#0a0f16}
    .ghost{background:#111827;color:var(--fg);border:1px solid #233042}
    .danger{background:var(--danger);color:#180a0a}
    .ok{background:var(--ok);color:#06231f}
    .small{padding:8px 12px;border-radius:999px;font-size:12px}
    .split{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px}
    .hr{height:1px;background:#1f2a37;border:none;margin:10px 0}
    .footer{color:var(--muted);font-size:12px;text-align:center;margin-top:10px}
    .host-badge{border:1px dashed #365285}
    .tag{padding:2px 8px;border-radius:999px;background:#0f1620;border:1px solid #223047;color:#9fb4d8;font-size:11px}
    .link{color:#9fb4ff;text-decoration:underline;cursor:pointer}
    .hidden{display:none}
    .font-family{ 
      font-family: Arial,sans-serif;
      text-align: center;
      margin: 0;
      padding: 20px;
      background-color: #111;
      color: #fff;
    }

    
    #timer {
      font-size: 5rem;
      font-weight: bold;
      margin: 20px 0;
    }

    
    button {
      font-size: 1.2rem;
      padding: 10px 20px;
      margin: 10px;
      border: none;
      border-radius: 8px;
      background: #007bff;
      color: white;
      cursor: pointer;
    }

    button:hover {
      background: #0056b3;
    }

    
    @media (max-width: 768px) {
    
    .timer {
      width: 100%;
      max-width: 100%;
      font-size: calc(10vw + 2rem); 
    }


    #hostPanel {
      width: auto;
      overflow-x: auto; 
      flex-direction: column; 
    }

    
    #timeMain {
      font-size: calc(15vw); 
      max-width: 100%;
      line-height: 1.1;
      text-align: center;
      overflow-wrap: break-word;
    }

    
    #timeSub {
      font-size: calc(6vw);
      max-width: 100%;
      text-align: center;
      opacity: 0.9;
    }

    
    .pill {
      flex-wrap: wrap;           
      justify-content: center;   
      padding: 6px 10px;
      gap: 6px;
    }

   
    .split, .btns {
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    button {
      font-size: 1rem;
      padding: 8px 12px;
      min-width: 100px;
      box-sizing: border-box;
    }

  
    .card {
      padding: 16px;
    }
  }