:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: #252925; background: #f8f9f5; --green: #2c563d; --muted: #73796e; --border: #e0e4d9; }
* { box-sizing: border-box; }
[hidden], input[type="hidden"] { display: none !important; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: var(--green); text-underline-offset: 4px; }
button, a, input { outline-offset: 4px; }
:focus-visible { outline: 2px solid #528267; }
.header { max-width: 1120px; margin: auto; padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); min-height: 94px; }
.brand { display: flex; align-items: center; gap: 16px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #252925; text-decoration: none; font-size: 19px; font-weight: 650; white-space: nowrap; letter-spacing: .04em; }
.mark { color: #d46c44; font-size: 32px; font-weight: 400; line-height: 1; }
.main { max-width: 1024px; margin: 0 auto; padding: 62px 0 80px; }
#auth-area { width: min(100%, 360px); margin: 0 auto; }
.auth-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.tab { background: none; border: 0; padding: 0 0 13px; font-size: 14px; color: #8a9085; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--green); border-bottom-color: var(--green); }
h1 { font-size: 24px; font-weight: 550; line-height: 1.5; margin: 0 0 24px; letter-spacing: -.02em; }
form { margin: 0; }
label { display: block; font-size: 13px; font-weight: 500; margin: 18px 0 8px; }
input { display: block; width: 100%; height: 46px; border: 1px solid #d7ddd0; border-radius: 7px; color: #2b3028; background: #fff; padding: 12px 13px; transition: border-color 120ms ease; line-height: 1.5; font-size: 14px; }
input::placeholder { color: #a0a697; }
input:focus { border-color: #779c79; }
input:disabled { background: #f1f3ed; }
.primary { width: 100%; min-height: 44px; background: var(--green); color: white; border: 1px solid var(--green); border-radius: 7px; margin-top: 26px; padding: 10px 16px; font-size: 14px; font-weight: 500; }
.primary:hover:not(:disabled) { background: #234631; }
.text-button { border: 0; padding: 0; background: transparent; color: var(--green); font-size: 13px; line-height: 1.7; }
.text-button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 4px; }
.form-links { display: flex; align-items: center; justify-content: flex-end; margin-top: 17px; gap: 12px; }
.field-hint { color: #818878; font-size: 11px; line-height: 1.75; margin: 7px 0 0; }
.back-link { margin-bottom: 24px; }
.status { max-width: 360px; margin: 0 auto 24px; border-left: 3px solid #6c9063; padding: 10px 13px; background: #eef3e8; color: #3c613d; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.status.error { background: #fbefeb; color: #a14b3d; border-left-color: #bf6b58; }
.status.pending { background: #eef1ed; color: #616d60; border-left-color: #a0ab9a; }
.account-menu { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e4edda; color: #577046; font-size: 13px; }
.account-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#account-name { font-size: 13px; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account-email { color: #8a9083; font-size: 10px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { margin-left: 12px; color: #818878; font-size: 12px; white-space: nowrap; }
#account-area { width: 100%; }
.products-heading { margin-bottom: 30px; }
.products-heading h1 { margin: 0; font-size: 28px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-card { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 144px; padding: 24px 20px; border: 1px solid var(--border); border-radius: 12px; background: #fffefa; color: inherit; text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
a.product-card:hover { border-color: #a6b99e; background: #fff; }
.product-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 11px; background: #eaf0e2; color: #52704b; font-size: 20px; font-weight: 500; }
.product-info { min-width: 0; flex: 1; }
.product-name { display: block; margin: 1px 0 8px; color: #2b352b; font-size: 16px; font-weight: 550; line-height: 1.4; }
.product-description { margin: 0; color: #818878; font-size: 12px; line-height: 1.7; }
.product-arrow { margin-top: 10px; margin-left: auto; color: #628454; font-size: 18px; line-height: 1; }
.products-empty { color: #8a9083; font-size: 14px; margin: 48px 0; }
.progress-line { width: 44px; height: 3px; background: #7b9d6d; margin: 20px 0 24px; }
@media (max-width: 1100px) { .header { margin: 0 40px; padding: 26px 0; } .main { margin-left: 40px; margin-right: 40px; } .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .header { margin: 0 22px; min-height: 82px; padding: 22px 0; gap: 16px; } .brand { gap: 9px; } .wordmark { gap: 6px; font-size: 17px; } .mark { font-size: 27px; } .environment { font-size: 9px; padding: 3px 5px; } .main { margin-left: 24px; margin-right: 24px; padding-top: 40px; } .account-menu { gap: 7px; } .account-avatar { display: none; } #account-name { max-width: 75px; font-size: 12px; } #account-email { display: none; } .logout-button { margin-left: 5px; font-size: 11px; } h1 { font-size: 22px; } .products-heading { margin-bottom: 22px; } .products-heading h1 { font-size: 25px; } .product-grid { grid-template-columns: 1fr; gap: 12px; } .product-card { min-height: 126px; padding: 22px 18px; } }
@media (max-width: 380px) { .environment { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }