body {
   font: 1em/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
   background: #f5f7fa;
   color: #333;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 .header-status {
   font-size: 1.2em;
   margin: 0 0.5em 0;
   color: #1a1a1a;
 }

 #status {
   font-weight: 600;
 }

 .status-ready {
   color: #28a745;
 }

 .status-checking {
   color: #007bff;
 }

 .status-error {
   color: #dc3545;
 }

 .btn {
   font-size: 1.2em;
   color: #fff;
   border: 0;
   border-radius: 6px;
   cursor: pointer;
   transition: background .3s, transform .1s;
 }

 #share-btn {
   background: #1a1a1a;
   padding: .8em 1em;
 }

 #start-btn {
   background: #ff008b;
   padding: .8em 2.5em;
 }

 #start-btn:disabled,
 #share-btn:disabled {
   background: #6c757d;
   cursor: not-allowed;
 }

 #start-btn:hover {
   background: #d40074;
   transform: translateY(-2px);
 }

 #share-btn:hover {
   background: #6c757d;
   transform: translateY(-2px);
 }


 hr {
   border-top: 1px solid #e0e0e0;
   margin: 20px 0;
 }

 table {
   width: 100%;
   border-collapse: collapse;
   background: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
   border-radius: 8px;
   overflow: hidden;
   margin-top: 0.2em;
 }

 th,
 td {
   padding: 4px 15px;
   text-align: center;
   border-bottom: 1px solid #e0e0e0;
   font-weight: 500;
 }

 th {
   background: #007bff;
   color: #fff;
   font-weight: 600 !important;
 }

 tr:last-child td {
   border-bottom: 0;
 }

 .ok {
   color: #28a745;
 }

 .skip {
   color: #1a1a1a;
 }

 .bad {
   color: #dc3545;
 }

 #log {
   background: #1a1a1a;
   color: #d4d4d4;
   padding: 15px;
   border-radius: 6px;
   font: .9em 'Courier New', Courier, monospace;
   max-height: 300px;
   overflow-y: auto;
   margin: 0.5em 0;
   overflow-wrap: anywhere;
 }

 #asn {
   margin-top: 0.2em;
   font-size: .9em;
   color: #555;
 }

 .footer {
   margin-top: 20px;
   font-size: .9em;
   color: #555;
 }

 a {
   color: #007bff;
   text-decoration: none;
 }

 a:hover {
   text-decoration: underline;
 }

 .asn-br::after {
   content: " • ";
 }

 @media (max-width: 600px) {
   body {
     padding: 5px;
   }

   .header-status {
     font-size: 1em;
   }

   .btn {
     font-size: 1em;
   }

   #start-btn {
     padding: .8em 1em;
     width: 33%;
   }

   table {
     font-size: .9em;
   }

   th,
   td {
     padding: 3px 2px;
   }

   #log {
     padding: 7px;
   }

   .asn-br::after {
     content: "\A";
     white-space: pre;
   }
 }