:root{--color-primary: #2C3E50;--color-primary-hover: #3E516D;--color-primary-active: #53647D;--color-white: #ffffff;--color-bg-light: #F8F9FD;--color-border: #D1D9E0;--color-text-primary: #2C3E50;--color-text-muted: #6C7A89;--color-text-disabled: #AAB8C2;--color-button-disabled: #6C7A89;--color-hover-light: #F4F5F6;--color-active-light: #E9EBEE;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 20px;--spacing-xl: 24px;--spacing-2xl: 32px;--spacing-3xl: 40px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--font-family-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-mono: "Courier New", Courier, monospace;--font-size-xs: 13px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 20px;--font-size-xl: 24px;--transition-fast: .2s ease-in-out;--transition-medium: .3s ease-out;--shadow-modal: 0 4px 24px rgba(0, 0, 0, .15);--shadow-input: 0 0 0 1000px var(--color-white) inset}*{box-sizing:border-box;margin:0;padding:0}html{visibility:hidden;height:100%}body{font-family:var(--font-family-base);margin:0;padding:0;min-height:100vh;background:var(--color-bg-light);display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg)}@media (max-width: 768px){body{padding:var(--spacing-sm);align-items:flex-start;padding-top:var(--spacing-lg)}}@media (max-width: 480px){body{padding:var(--spacing-xs);padding-top:var(--spacing-md)}}.container{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-3xl);width:100%;max-width:420px}.signed-out[hidden]{display:none}@media (max-width: 768px){.container{max-width:100%;padding:var(--spacing-2xl) var(--spacing-xl)}}@media (max-width: 480px){.container{padding:var(--spacing-xl) var(--spacing-lg);border-radius:var(--radius-md)}}.logo{text-align:center;margin-bottom:var(--spacing-2xl)}.logo img{height:48px;width:auto}@media (max-width: 480px){.logo{margin-bottom:var(--spacing-xl)}.logo img{height:40px}}h1{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--spacing-xs) 0;text-align:left}.subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0 0 var(--spacing-xl) 0;text-align:left}@media (max-width: 480px){h1{font-size:var(--font-size-lg);margin-bottom:6px}.subtitle{font-size:var(--font-size-xs);margin-bottom:var(--spacing-lg)}}.form-group{margin-bottom:var(--spacing-lg)}label{display:block;font-size:var(--font-size-sm);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-xs);text-align:left}.output-label{display:block;font-size:var(--font-size-sm);font-weight:700;color:var(--color-text-primary);margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xs);text-align:left}input[type=text],textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-md);font-family:inherit;border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);background:var(--color-white);color:var(--color-text-primary);-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=text]::placeholder,textarea::placeholder{color:var(--color-text-disabled)}input[type=text]:focus,textarea:focus{outline:none;border:2px solid var(--color-primary);background-color:var(--color-white);box-shadow:none;padding:7px 11px}input[type=text]{resize:none}textarea{resize:vertical}#machineId{font-family:var(--font-family-mono);background:var(--color-white);font-size:var(--font-size-sm);line-height:normal;padding:var(--spacing-xs) var(--spacing-sm)}#machineId::placeholder{font-family:var(--font-family-mono)}#machineId:focus{padding:7px 11px}#machineId:-webkit-autofill,#machineId:-webkit-autofill:hover,#machineId:-webkit-autofill:focus{-webkit-box-shadow:var(--shadow-input);box-shadow:var(--shadow-input);-webkit-text-fill-color:var(--color-text-primary);transition:background-color 5000s ease-in-out 0s}@media (max-width: 480px){input[type=text],textarea{padding:14px var(--spacing-md);font-size:var(--font-size-md)}.form-group{margin-bottom:18px}#machineId{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-md)}}#submit{width:100%;padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);font-weight:700;font-family:inherit;color:var(--color-white);background-color:var(--color-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast);margin-top:0}#submit:hover{background-color:var(--color-primary-hover)}#submit:active{background-color:var(--color-primary-active)}#submit:disabled{background-color:var(--color-button-disabled);cursor:not-allowed;opacity:.7}#submit:disabled:hover{background-color:var(--color-button-disabled)}#logout{width:100%;padding:7px 15px;font-size:var(--font-size-sm);font-weight:700;font-family:inherit;color:var(--color-primary);background-color:var(--color-white);border:2px solid var(--color-primary);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast);margin-top:0}#logout:hover{background-color:var(--color-hover-light);border-color:var(--color-primary)}#logout:active{background-color:var(--color-active-light);border-color:var(--color-primary)}@media (max-width: 480px){#submit{padding:10px var(--spacing-md);font-size:var(--font-size-sm)}#logout{padding:9px 15px}}.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--color-white);border-radius:50%;animation:spin .6s linear infinite;margin-right:var(--spacing-xs);vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.output-container{position:relative;margin-top:0;margin-bottom:var(--spacing-lg)}#out{background:var(--color-bg-light);padding:var(--spacing-md);border-radius:var(--radius-md);margin-top:0;white-space:pre-wrap;word-break:break-all;font-family:var(--font-family-mono);font-size:var(--font-size-xs);line-height:1.6;color:var(--color-text-primary);border:1px solid var(--color-border);min-height:60px}#copy-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:#fffffff2;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;padding:6px;display:none;transition:background-color var(--transition-fast),border-color var(--transition-fast)}#copy-btn:hover{background-color:var(--color-white);border-color:var(--color-primary)}#copy-btn svg{display:block;color:var(--color-primary);width:16px;height:16px}@media (max-width: 480px){.output-container{margin-top:0;margin-bottom:18px}#out{padding:14px;font-size:var(--font-size-xs);min-height:80px}#copy-btn{top:10px;right:10px;padding:var(--spacing-xs)}#copy-btn svg{width:18px;height:18px}}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000;align-items:center;justify-content:center;padding:var(--spacing-lg);animation:fadeIn var(--transition-fast)}.modal-content{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-2xl);width:100%;max-width:480px;box-shadow:var(--shadow-modal);animation:slideUp var(--transition-medium)}.modal-content h2{font-size:var(--font-size-lg);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--spacing-sm) 0;text-align:left}.modal-content p{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0 0 var(--spacing-xl) 0;line-height:1.5;text-align:left;overflow-wrap:break-word}.modal-content p strong{color:var(--color-text-primary);font-weight:700}.modal-actions{display:flex;flex-direction:column;gap:10px}.modal-actions .btn{width:100%;padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);font-weight:700;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.modal-actions .btn-primary{color:var(--color-white);background-color:var(--color-primary)}.modal-actions .btn-primary:hover{background-color:var(--color-primary-hover)}.modal-actions .btn-primary:active{background-color:var(--color-primary-active)}.modal-actions .btn-secondary{color:var(--color-primary);background-color:#e8edf2;border:1px solid var(--color-border)}.modal-actions .btn-secondary:hover{background-color:#d8dee4;border-color:var(--color-text-disabled)}.modal-actions .btn-secondary:active{background-color:#c8ced4}.modal-actions .btn-cancel{color:var(--color-primary);background-color:var(--color-white);border:2px solid var(--color-primary);padding:7px 15px}.modal-actions .btn-cancel:hover{background-color:var(--color-hover-light);border-color:var(--color-primary)}.modal-actions .btn-cancel:active{background-color:var(--color-active-light);border-color:var(--color-primary)}@media (max-width: 480px){.modal{padding:var(--spacing-md)}.modal-content{padding:var(--spacing-xl) var(--spacing-lg)}.modal-content h2{font-size:18px;margin-bottom:10px}.modal-content p{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lg)}.modal-actions .btn{padding:10px var(--spacing-md)}.modal-actions .btn-cancel{padding:9px 15px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}