:root{--ink:#173f59;--muted:#687d8e;--line:#dbe6ed;--blue:#1686c7;--red:#e65b51;--green:#168c73;--paper:#f5f9fb;--white:#fff}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Microsoft YaHei","Noto Sans SC",Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.site-header{width:min(1500px,calc(100% - 40px));height:72px;display:flex;align-items:center;justify-content:space-between;margin:auto;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:11px}.logo>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#fff;background:var(--blue);font:900 22px Georgia,serif}.logo div{display:grid;gap:2px}.logo b{font-size:16px}.logo small{color:#7890a1;font-size:10px;font-weight:800;letter-spacing:.12em}.site-header nav{display:flex;align-items:center;gap:19px;color:#536b7e;font-size:14px;font-weight:800}.site-header nav a:hover{color:var(--blue)}.site-header nav form{margin:0}.nav-cta,.nav-button{padding:9px 14px;border:1px solid var(--blue);border-radius:8px;color:#fff!important;background:var(--blue)}.nav-button{height:38px}.user-pill{padding:8px 11px;border-radius:8px;color:#28715f;background:#e5f6f0;font-size:12px}
.flash-stack{position:fixed;z-index:30;top:84px;right:24px;display:grid;gap:7px}.flash{max-width:360px;padding:11px 14px;border:1px solid #c7d9e5;border-left:4px solid var(--blue);border-radius:8px;background:#fff;box-shadow:0 8px 25px rgba(25,54,76,.14);font-size:13px;font-weight:700}.flash.error{border-left-color:var(--red)}.flash.success{border-left-color:var(--green)}main{width:min(1500px,calc(100% - 40px));margin:auto}.hero{min-height:355px;display:grid;grid-template-columns:1fr 330px;align-items:center;gap:60px;padding:54px 20px}.eyebrow,.page-heading>p,.auth-card>p,.launch-card>p{margin:0 0 10px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.18em}.hero h1{margin:0;font-size:clamp(43px,5vw,72px);line-height:1.08;letter-spacing:-.055em}.hero h1 em{color:var(--red);font-style:normal}.hero-copy{max-width:670px;margin:22px 0 0;color:#617789;font-size:18px;font-weight:600;line-height:1.75}.hero-panel{position:relative;overflow:hidden;padding:29px;border:1px solid #cde0ea;border-radius:20px;color:#fff;background:linear-gradient(145deg,#165478,#168b8b);box-shadow:0 18px 45px rgba(21,90,112,.2)}.hero-panel span{font-size:14px;font-weight:800}.hero-panel b{display:block;margin:8px 0 2px;font:900 74px Georgia,serif}.hero-panel p{margin:0;color:#d5f4f0;font-weight:700}.hero-panel i{position:absolute;right:-35px;bottom:-48px;width:150px;height:150px;border:25px solid rgba(255,255,255,.11);border-radius:50%}
.gallery-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:5px 0 20px;padding:0 3px}.gallery-head>div>span{color:var(--green);font-size:13px;font-weight:900;letter-spacing:.15em}.gallery-head h2{margin:5px 0 0;font-size:29px}.gallery-head>p{margin:0;padding:9px 13px;border-radius:8px;color:#796852;background:#fff3db;font-size:13px;font-weight:700}.gallery-head>p b{color:#ba781b}.gallery-head .all-open{color:#176f5d;background:#e5f6f0}.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.model-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 9px 25px rgba(28,63,89,.055);transition:.2s ease}.model-card:not(.locked):hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(28,63,89,.12)}.card-visual{position:relative;height:174px;overflow:hidden;background:linear-gradient(150deg,#edf7fb,#f8fbfd)}.visual-top{position:absolute;z-index:3;top:12px;left:13px;right:13px;display:flex;justify-content:space-between}.visual-top span,.visual-top b,.free-badge{padding:5px 8px;border-radius:6px;font-size:10px;font-style:normal;font-weight:900}.visual-top span{color:#1a658d;background:rgba(255,255,255,.86)}.visual-top b{color:#fff;background:#1c5877}.free-badge{position:absolute;z-index:3;right:13px;bottom:11px;color:#fff;background:var(--green)}.card-body{position:relative;min-height:186px;padding:18px}.card-index{position:absolute;top:17px;right:17px;color:#c5d2db;font:900 18px Georgia,serif}.card-body h3{margin:0 38px 8px 0;font-size:19px}.card-body p{min-height:48px;margin:0;color:#667c8e;font-size:13px;line-height:1.65}.card-body>a{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--blue);font-size:13px;font-weight:900}.card-body>a i{font-size:20px;font-style:normal}.model-card.locked .card-visual,.model-card.locked .card-body{filter:blur(7px);opacity:.58;user-select:none;pointer-events:none}.lock-layer{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(241,247,250,.36);backdrop-filter:blur(1px)}.lock-layer>span{width:47px;height:47px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#234e68;font-size:28px;transform:rotate(90deg)}.lock-layer b{margin:10px 0 8px;font-size:15px}.lock-layer a{padding:7px 12px;border-radius:7px;color:#fff;background:var(--blue);font-size:12px;font-weight:900}
.thumbnail{position:absolute;inset:0}.thumbnail .shape{position:absolute;display:block}.thumb-pump .a{left:27%;top:34%;width:34%;height:62%;border:5px solid #226586;border-top:0;border-radius:0 0 13px 13px;background:#8bd5ed}.thumb-pump .b{left:42%;top:16%;width:8%;height:49%;background:#e05e50}.thumb-pump .c{left:19%;bottom:14%;width:23%;height:7px;background:#226586}.thumb-pump .d{left:16%;bottom:8%;width:7px;height:28%;background:#226586}.thumb-lens .a{left:47%;top:25%;width:18px;height:91px;border:3px solid #1585c7;border-radius:50%;background:rgba(94,193,232,.38)}.thumb-lens .b,.thumb-lens .c{left:12%;top:46%;width:72%;height:3px;background:#e45b50;transform-origin:left}.thumb-lens .b{transform:rotate(10deg)}.thumb-lens .c{transform:rotate(-9deg)}.thumb-ray .a{left:10%;top:60%;width:80%;height:4px;background:#22617e}.thumb-ray .b,.thumb-ray .c{left:47%;top:8%;width:4px;height:70%;background:#e85c50;transform-origin:bottom}.thumb-ray .b{transform:rotate(-33deg)}.thumb-ray .c{transform:rotate(39deg);background:#1a8bc8}.thumb-resistor .a{left:17%;top:58%;width:67%;height:24px;border-radius:6px;background:repeating-linear-gradient(90deg,#cf7940 0 6px,#efd6a7 6px 12px)}.thumb-resistor .b{left:18%;top:35%;width:65%;height:5px;background:#275c78}.thumb-resistor .c{left:50%;top:28%;width:12px;height:54px;border-radius:5px;background:#e4554b}.thumb-circuit .a{left:17%;top:26%;width:65%;height:86px;border:4px solid #2473a1;border-radius:12px}.thumb-circuit .b,.thumb-circuit .c{top:47%;width:38px;height:38px;border:4px solid #de9e2e;border-radius:50%;background:#fff4ae;box-shadow:0 0 18px rgba(238,179,53,.5)}.thumb-circuit .b{left:25%}.thumb-circuit .c{right:25%}.thumb-lever .a{left:14%;top:52%;width:72%;height:9px;border-radius:5px;background:#d17642;transform:rotate(-7deg)}.thumb-lever .b{left:44%;top:56%;width:0;height:0;border-left:27px solid transparent;border-right:27px solid transparent;border-bottom:48px solid #2c718d}.thumb-lever .c,.thumb-lever .d{top:33%;width:18px;height:38px;background:#e4524d}.thumb-lever .c{left:24%}.thumb-lever .d{right:21%;height:28px}.thumb-float .a,.thumb-pressure .a{left:18%;top:27%;width:65%;height:112px;border:5px solid #286781;border-top:0;background:linear-gradient(transparent 18%,rgba(54,167,221,.48) 18%)}.thumb-float .b{left:41%;top:55%;width:55px;height:48px;border-radius:9px;background:#e1a04c}.thumb-pressure .b{left:49%;top:59%;width:25px;height:25px;border:5px solid #e15149;border-radius:50%;background:#fff}.thumb-pressure .c{left:53%;top:31%;width:3px;height:53px;border-left:3px dashed #e15149}.thumb-thermo .a{left:47%;top:22%;width:16px;height:88px;border:4px solid #386b85;border-radius:9px;background:#fff}.thumb-thermo .b{left:43%;top:68%;width:39px;height:39px;border-radius:50%;background:#e75149}.thumb-thermo .c{left:52%;top:37%;width:6px;height:62px;background:#e75149}.thumb-atmosphere .a{left:24%;top:30%;width:54%;height:91px;border:5px solid #28677f;border-radius:12px;background:#d8eff7}.thumb-atmosphere .b{left:32%;top:17%;width:38%;height:17px;border-radius:8px;background:#e35b50}.thumb-atmosphere .c{left:49%;top:6%;width:5px;height:48px;background:#506e7c}.thumb-incline .a{left:15%;bottom:24%;width:0;height:0;border-left:0 solid transparent;border-right:215px solid transparent;border-bottom:105px solid #dce5ea}.thumb-incline .b{left:44%;top:42%;width:49px;height:40px;border-radius:7px;background:#e39b43;transform:rotate(-26deg)}.thumb-incline .c{left:55%;top:24%;width:82px;height:4px;background:#1681c8;transform:rotate(-26deg)}.thumb-pulley .a,.thumb-pulley .b{top:26%;width:45px;height:45px;border:6px solid #2b6d8b;border-radius:50%;background:#fff}.thumb-pulley .a{left:31%}.thumb-pulley .b{right:29%;top:57%}.thumb-pulley .c{left:38%;top:22%;width:32%;height:99px;border-left:4px solid #e05a4f;border-right:4px solid #e05a4f}.thumb-energy .a{left:14%;top:35%;width:72%;height:94px;border-bottom:7px solid #2b718f;border-radius:0 0 50% 50%}.thumb-energy .b{left:22%;top:28%;width:34px;height:34px;border-radius:50%;background:#e25a4f}.thumb-energy .c{right:20%;top:22%;width:48px;height:5px;background:#1688c9;transform:rotate(-25deg)}.thumb-inertia .a{left:23%;top:57%;width:58%;height:45px;border-radius:8px;background:#28769d}.thumb-inertia .a::before,.thumb-inertia .a::after{content:"";position:absolute;bottom:-15px;width:24px;height:24px;border-radius:50%;background:#344e5d}.thumb-inertia .a::before{left:12px}.thumb-inertia .a::after{right:12px}.thumb-inertia .b{left:45%;top:31%;width:42px;height:47px;border-radius:7px;background:#e3a04b}.thumb-inertia .c{right:11%;top:48%;width:62px;height:5px;background:#e0524a}
.teaching-note{display:flex;align-items:center;gap:15px;margin-top:20px;padding:16px 20px;border-radius:11px;color:#205e50;background:#e7f6f1;font-size:14px;font-weight:700}.teaching-note span{padding:7px 10px;border-radius:6px;color:#fff;background:var(--green);font-weight:900}.teaching-note p{margin:0}.center-page{min-height:calc(100vh - 145px);display:grid;place-items:center;padding:40px 0}.auth-card,.launch-card{width:min(460px,100%);padding:34px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 16px 42px rgba(25,60,85,.1)}.auth-mark{width:48px;height:48px;display:grid;place-items:center;margin-bottom:18px;border-radius:13px;color:#fff;background:var(--blue);font-size:22px;font-weight:900}.auth-card h1,.launch-card h1{margin:0 0 7px;font-size:28px}.auth-card>span,.launch-card>span{color:#6b8091;font-size:14px}.auth-card form{display:grid;gap:13px;margin-top:23px}.auth-card label{display:grid;gap:6px;color:#536a7c;font-size:12px;font-weight:900}.auth-card input,.user-row input{height:43px;padding:0 12px;border:1px solid #cbd9e3;border-radius:8px;outline:0;color:var(--ink);background:#fbfdfe}.auth-card input:focus,.user-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,134,199,.12)}.auth-card form>button{height:45px;border:0;border-radius:8px;color:#fff;background:var(--blue);font-weight:900}.auth-switch{margin-top:18px;color:#718596;text-align:center;font-size:13px}.auth-switch a{color:var(--blue);font-weight:900}.page-heading{padding:48px 3px 25px}.page-heading h1{margin:0 0 7px;font-size:34px}.page-heading span{color:#667c8e}.user-table{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff}.table-head,.user-row{display:grid;grid-template-columns:1.1fr .6fr 1fr 1.5fr;align-items:center;gap:14px;padding:13px 18px}.table-head{color:#6b8091;background:#eef5f8;font-size:12px;font-weight:900}.user-row{border-top:1px solid var(--line)}.user-row>div{display:grid}.user-row small{color:#91a1ad}.role{width:max-content;padding:5px 8px;border-radius:6px;color:#4d6779;background:#edf2f5;font-size:11px;font-weight:900}.role.admin{color:#9b6421;background:#fff0d5}.user-row time{color:#6d8293;font-size:12px}.user-row form{display:grid;grid-template-columns:1fr auto;gap:7px}.user-row button{border:0;border-radius:7px;color:#fff;background:var(--blue);font-weight:800}.launch-card{text-align:center}.loader{height:52px;display:flex;align-items:end;justify-content:center;gap:6px;margin-bottom:18px}.loader i{width:8px;border-radius:5px;background:var(--blue);animation:pulse 1s infinite ease-in-out}.loader i:nth-child(1){height:22px}.loader i:nth-child(2){height:42px;animation-delay:.15s}.loader i:nth-child(3){height:30px;animation-delay:.3s}@keyframes pulse{50%{opacity:.35;transform:scaleY(.65)}}.launch-card a{display:inline-block;margin-top:22px;padding:10px 14px;border-radius:8px;color:#fff;background:var(--blue);font-size:13px;font-weight:900}.error-card>h1{font:900 70px Georgia,serif;color:var(--red)}footer{width:min(1500px,calc(100% - 40px));display:flex;justify-content:center;gap:12px;margin:28px auto 0;padding:24px 0;border-top:1px solid var(--line);color:#718596;font-size:12px}footer b{color:#4d6678}
@media(max-width:1180px){.model-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.site-header nav>a:not(.nav-cta),.user-pill{display:none}.hero{grid-template-columns:1fr;padding:45px 5px}.hero-panel{display:none}.model-grid{grid-template-columns:repeat(2,1fr)}.table-head{display:none}.user-row{grid-template-columns:1fr 1fr}.user-row form{grid-column:1/3}}@media(max-width:600px){.site-header,main,footer{width:min(100% - 18px,580px)}.site-header nav{gap:8px}.logo small{display:none}.hero{min-height:310px}.hero h1{font-size:42px}.hero-copy{font-size:15px}.gallery-head{align-items:flex-start;flex-direction:column}.model-grid{grid-template-columns:1fr}.card-visual{height:190px}.auth-card,.launch-card{padding:26px 19px}.user-row{grid-template-columns:1fr}.user-row form{grid-column:1}.teaching-note{align-items:flex-start;flex-direction:column;gap:8px}footer{display:block;text-align:center;line-height:1.8}}
 .model-card-link{display:block;color:inherit}.card-action{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--blue);font-size:13px;font-weight:900}.card-action i{font-size:20px;font-style:normal}
.admin-section{margin:0 0 18px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff}.admin-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:13px}.admin-section-head span{color:var(--green);font-size:11px;font-weight:900;letter-spacing:.14em}.admin-section-head h2{margin:4px 0 0;font-size:22px}.admin-section-head small{color:#778b9a;font-size:12px}.visitor-table{overflow-x:auto;border:1px solid var(--line);border-radius:10px}.visitor-head,.visitor-row{display:grid;grid-template-columns:1.05fr 1.45fr .55fr .65fr 1.15fr 1.15fr;align-items:center;gap:12px;min-width:980px;padding:11px 14px}.visitor-head{color:#6b8091;background:#eef5f8;font-size:11px;font-weight:900}.visitor-row{border-top:1px solid var(--line);font-size:13px}.visitor-row strong{color:var(--blue);font-size:18px}.visitor-row span{color:#6d8291}.visitor-row .visitor-location{color:#315f79;font-weight:700;line-height:1.45}.visitor-row time{color:#6d8291;font-size:11px}.visitor-row code{color:#4d6d82;font-family:Consolas,monospace;font-size:12px}.visitor-table.recent .visitor-head,.visitor-table.recent .visitor-row{grid-template-columns:1.15fr 1fr 1.4fr .75fr 1.5fr;min-width:900px}.empty-row{padding:22px;color:#8294a1;text-align:center;font-size:13px}
/* 锁定模型保持缩略图清晰，只用半透明提示层说明登录要求。 */
.model-card.locked .card-visual,.model-card.locked .card-body{filter:none;opacity:1}
.lock-layer{background:rgba(241,247,250,.68);backdrop-filter:none}
/* 新增模型的极简卡片缩略图。 */
.thumb-electromagnet .a{left:31%;top:23%;width:38%;height:78%;border:6px solid #c86c3e;border-left-width:12px;border-right-width:12px;border-radius:18px;background:repeating-linear-gradient(0deg,transparent 0 10px,#e28b5a 11px 15px)}.thumb-electromagnet .b{left:42%;top:18%;width:16%;height:84%;background:#6c7d87;border-radius:7px}.thumb-electromagnet .c{left:13%;top:62%;width:27%;height:4px;background:#2d73a0;transform:rotate(-24deg)}.thumb-electromagnet .d{right:13%;top:62%;width:27%;height:4px;background:#2d73a0;transform:rotate(24deg)}
.thumb-engine .a{left:25%;top:26%;width:50%;height:61%;border:5px solid #2a6d87;border-radius:8px;background:#d9edf3}.thumb-engine .b{left:37%;top:34%;width:26%;height:25%;border-radius:4px;background:#e4a04c}.thumb-engine .c{left:48%;top:12%;width:5px;height:28%;background:#df5a4f}.thumb-engine .d{left:48%;bottom:8%;width:5px;height:24%;background:#df5a4f}
.thumb-generator .a{left:34%;top:26%;width:32%;height:52%;border:6px solid #2f6f8e;border-radius:50%;background:#fff}.thumb-generator .b{left:48%;top:12%;width:5px;height:28%;background:#e05b4f;transform-origin:bottom;transform:rotate(28deg)}.thumb-generator .c{left:17%;top:65%;width:66%;height:5px;background:#2f75a0}.thumb-generator .d{left:45%;top:65%;width:10%;height:22%;border:4px solid #e2a139;border-top:0}

/* 首页缩略图使用规范化的小型原理图：统一线宽，只保留决定物理结构的关键构件。 */
.thumbnail-diagram{--dl:#225c78;--db:#1686c7;--dr:#e65b51;--dg:#e0a03c;--dw:#8bd7ed;position:absolute;inset:0;overflow:hidden}
.thumbnail-diagram .part{position:absolute;display:block;box-sizing:border-box}
.thumbnail-diagram .part::before,.thumbnail-diagram .part::after{position:absolute;box-sizing:border-box;content:""}

/* 活塞泵：水源—进水管—下阀—活塞阀—出水嘴构成连续水路。 */
.diagram-pump .p1{left:39%;top:32%;width:25%;height:61%;border:4px solid var(--dl);border-radius:5px 5px 10px 10px;background:linear-gradient(to top,rgba(75,185,222,.62) 0 53%,transparent 53%)}
.diagram-pump .p1::before{left:7%;top:25%;width:86%;height:6px;border-radius:4px;background:var(--dr)}
.diagram-pump .p1::after{left:34%;top:70%;width:32%;height:5px;border-radius:4px;background:var(--dr);transform:rotate(-18deg);transform-origin:right}
.diagram-pump .p2{left:50%;top:12%;width:5px;height:37%;border-radius:3px;background:var(--dr)}
.diagram-pump .p2::before{left:-27px;top:0;width:59px;height:6px;border-radius:5px;background:var(--dr)}
.diagram-pump .p3{left:22%;top:67%;width:19%;height:23%;border-left:5px solid var(--dl);border-bottom:5px solid var(--dl);border-radius:0 0 0 9px}
.diagram-pump .p4{left:9%;bottom:6%;width:29%;height:27%;border:4px solid var(--dl);border-top:0;border-radius:0 0 9px 9px;background:linear-gradient(to top,rgba(75,185,222,.62) 0 73%,transparent 73%)}
.diagram-pump .p5{left:63%;top:45%;width:24%;height:16%;border-top:5px solid var(--dl);border-right:5px solid var(--dl);border-radius:0 9px 0 0}
.diagram-pump .p5::after{right:-5px;top:11px;width:5px;height:25px;border-radius:0 0 5px 5px;background:var(--db);box-shadow:0 20px 0 -1px rgba(22,134,199,.45)}
.diagram-pump .p6{left:44%;top:54%;width:14px;height:10px;border-top:4px solid var(--dr);transform:rotate(-18deg)}
.diagram-pump .p6::after{right:-2px;top:-7px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid var(--dr)}

/* 凸透镜：主轴、物箭头、光屏与两条典型成像光线。 */
.diagram-lens .p1{left:48%;top:19%;width:20px;height:111px;border:3px solid var(--db);border-radius:50%;background:rgba(90,194,232,.3)}
.diagram-lens .p2{left:10%;top:58%;width:80%;border-top:2px dashed #7893a3}
.diagram-lens .p3{left:24%;top:35%;width:4px;height:41px;background:var(--dr)}
.diagram-lens .p3::before{left:-7px;top:-1px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:0;border-top:12px solid var(--dr)}
.diagram-lens .p4{right:14%;top:23%;width:5px;height:105px;border-radius:3px;background:#7893a3}
.diagram-lens .p5{left:25%;top:35%;width:24%;border-top:3px solid var(--dr)}
.diagram-lens .p5::after{left:100%;top:-2px;width:124%;border-top:3px solid var(--dr);transform:rotate(19deg);transform-origin:left}
.diagram-lens .p6{left:25%;top:35%;width:58%;border-top:3px solid var(--db);transform:rotate(10deg);transform-origin:left}

/* 反射与折射：法线垂直界面，反射角等于入射角，折射光进入下方介质。 */
.diagram-ray .p1{left:9%;top:57%;width:82%;height:4px;background:var(--dl)}
.diagram-ray .p1::after{left:0;top:4px;width:100%;height:53px;background:rgba(86,188,226,.18)}
.diagram-ray .p2{left:50%;top:13%;height:126px;border-left:3px dashed #8aa0ad}
.diagram-ray .p3{left:23%;top:18%;width:34%;border-top:4px solid var(--dr);transform:rotate(38deg);transform-origin:right}
.diagram-ray .p3::after{right:5px;top:-8px;border-left:9px solid var(--dr);border-top:6px solid transparent;border-bottom:6px solid transparent}
.diagram-ray .p4{left:50%;top:57%;width:34%;border-top:4px solid var(--db);transform:rotate(-38deg);transform-origin:left}
.diagram-ray .p5{left:50%;top:57%;width:31%;border-top:4px solid var(--dg);transform:rotate(59deg);transform-origin:left}
.diagram-ray .p6{left:44%;top:49%;width:18px;height:18px;border:2px solid #7a93a3;border-left:0;border-bottom:0;border-radius:0 18px 0 0}

/* 滑动变阻器：电阻丝、瓷筒、滑片、触点和四个接线柱位置明确。 */
.diagram-resistor .p1{left:17%;top:57%;width:66%;height:27px;border:3px solid #b86d3f;border-radius:8px;background:#f3ddb6}
.diagram-resistor .p2{left:19%;top:60%;width:62%;height:21px;background:repeating-linear-gradient(90deg,transparent 0 5px,#c56d38 5px 8px)}
.diagram-resistor .p3{left:20%;top:35%;width:61%;height:5px;border-radius:4px;background:var(--dl)}
.diagram-resistor .p4{left:49%;top:29%;width:10px;height:54px;border-radius:5px;background:var(--dr)}
.diagram-resistor .p4::after{left:-5px;bottom:-3px;width:20px;height:8px;border-radius:4px;background:var(--dr)}
.diagram-resistor .p5,.diagram-resistor .p6{top:76%;width:12px;height:12px;border:3px solid var(--dl);border-radius:50%;background:#fff}
.diagram-resistor .p5{left:12%;box-shadow:0 -65px 0 -3px #fff,0 -65px 0 0 var(--dl)}
.diagram-resistor .p6{right:12%;box-shadow:0 -65px 0 -3px #fff,0 -65px 0 0 var(--dl)}

/* 串并联：缩略图采用并联结构，两只灯泡各占一条独立支路。 */
.diagram-circuit .p1{left:14%;top:25%;width:72%;height:104px;border:4px solid var(--dl);border-radius:10px}
.diagram-circuit .p2,.diagram-circuit .p3{left:20%;width:60%;border-top:4px solid var(--dl)}
.diagram-circuit .p2{top:47%}.diagram-circuit .p3{top:70%}
.diagram-circuit .p2::after,.diagram-circuit .p3::after{left:calc(50% - 18px);top:-20px;width:36px;height:36px;border:4px solid var(--dg);border-radius:50%;background:#fff8cf;box-shadow:inset 0 0 0 5px #fff}
.diagram-circuit .p2::before,.diagram-circuit .p3::before{z-index:2;left:calc(50% - 7px);top:-8px;width:14px;height:12px;border-bottom:3px solid var(--dg);transform:rotate(45deg)}
.diagram-circuit .p4{left:12%;top:54%;width:9px;height:32px;background:var(--paper);border-top:4px solid var(--dr);border-bottom:8px solid var(--dr)}
.diagram-circuit .p5,.diagram-circuit .p6{top:45%;width:9px;height:9px;border-radius:50%;background:var(--dl);box-shadow:0 40px 0 var(--dl)}
.diagram-circuit .p5{left:18.5%}.diagram-circuit .p6{right:18.5%}

/* 杠杆：支点位于杆下，两侧力均通过悬挂线作用在杆上。 */
.diagram-lever .p1{left:13%;top:52%;width:74%;height:9px;border-radius:6px;background:#c97843;transform:rotate(-7deg)}
.diagram-lever .p2{left:44%;top:54%;border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:44px solid var(--dl);border-top:0}
.diagram-lever .p3,.diagram-lever .p4{width:4px;background:var(--dl)}
.diagram-lever .p3{left:25%;top:39%;height:35px}.diagram-lever .p4{right:25%;top:34%;height:30px}
.diagram-lever .p3::after,.diagram-lever .p4::after{left:-13px;bottom:-27px;width:30px;height:25px;border-radius:5px;background:var(--dr)}
.diagram-lever .p5{left:21%;top:20%;height:28px;border-left:4px solid var(--db)}
.diagram-lever .p5::after{left:-7px;bottom:-3px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--db)}
.diagram-lever .p6{left:47%;top:81%;width:45%;border-top:3px solid #91a3ae}

/* 浮沉：物体部分露出液面，浮力与重力沿同一竖直线反向。 */
.diagram-float .p1{left:19%;top:28%;width:62%;height:112px;border:4px solid var(--dl);border-top:0;border-radius:0 0 9px 9px}
.diagram-float .p2{left:21%;top:49%;width:58%;height:73px;background:rgba(75,185,222,.45)}
.diagram-float .p3{left:42%;top:39%;width:50px;height:47px;border:3px solid #be7639;border-radius:7px;background:#e7aa55}
.diagram-float .p4,.diagram-float .p5{left:50%;width:4px}
.diagram-float .p4{top:24%;height:36px;background:var(--db)}
.diagram-float .p4::before{left:-7px;top:-1px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:11px solid var(--db)}
.diagram-float .p5{top:64%;height:36px;background:var(--dr)}
.diagram-float .p5::after{left:-7px;bottom:-1px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid var(--dr)}
.diagram-float .p6{left:24%;top:47%;width:52%;border-top:3px solid var(--db)}

/* 液体压强：同一液体中深处喷流更远，并标出深度方向。 */
.diagram-pressure .p1{left:17%;top:27%;width:51%;height:114px;border:4px solid var(--dl);border-top:0;border-radius:0 0 8px 8px}
.diagram-pressure .p2{left:19%;top:43%;width:47%;height:84px;background:rgba(75,185,222,.47);border-top:3px solid var(--db)}
.diagram-pressure .p3,.diagram-pressure .p4{left:67%;height:4px;border-radius:0 5px 5px 0;background:var(--db)}
.diagram-pressure .p3{top:56%;width:16%}.diagram-pressure .p4{top:75%;width:27%}
.diagram-pressure .p3::before,.diagram-pressure .p4::before{left:-5px;top:-2px;width:8px;height:8px;border:2px solid var(--dl);border-radius:50%;background:#fff}
.diagram-pressure .p5{left:27%;top:44%;height:52%;border-left:3px dashed var(--dr)}
.diagram-pressure .p5::after{left:-7px;bottom:-1px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--dr)}
.diagram-pressure .p6{left:25%;top:69%;width:10px;border-top:3px solid var(--dr)}

/* 物态变化：烧杯中冰水受热，温度计独立插入且不接触杯底。 */
.diagram-thermo .p1{left:31%;top:35%;width:42%;height:86px;border:4px solid var(--dl);border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(to top,rgba(75,185,222,.42) 0 54%,transparent 54%)}
.diagram-thermo .p2{left:45%;top:16%;width:13px;height:88px;border:3px solid var(--dl);border-radius:8px;background:#fff}
.diagram-thermo .p2::before{left:2px;bottom:5px;width:3px;height:58px;background:var(--dr)}
.diagram-thermo .p2::after{left:-3px;bottom:-9px;width:13px;height:13px;border-radius:50%;background:var(--dr)}
.diagram-thermo .p3,.diagram-thermo .p4{top:68%;width:25px;height:20px;border:2px solid #70a9bc;background:rgba(255,255,255,.7);transform:rotate(12deg)}
.diagram-thermo .p3{left:36%}.diagram-thermo .p4{left:53%;transform:rotate(-9deg)}
.diagram-thermo .p5{left:37%;bottom:6%;width:31%;height:9px;border-radius:50%;background:var(--dr)}
.diagram-thermo .p6{left:49%;bottom:12%;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:25px solid #f09b3c}

/* 大气压：托里拆利装置，封闭玻璃管中的液柱高于槽内液面。 */
.diagram-atmosphere .p1{left:24%;bottom:8%;width:53%;height:37px;border:4px solid var(--dl);border-radius:4px 4px 10px 10px;background:rgba(75,185,222,.46)}
.diagram-atmosphere .p2{left:45%;top:15%;width:18px;height:119px;border:4px solid var(--dl);border-bottom:0;border-radius:9px 9px 0 0;background:#fff}
.diagram-atmosphere .p3{left:49%;top:42%;width:10px;height:85px;background:rgba(75,185,222,.72)}
.diagram-atmosphere .p4{left:61%;top:42%;height:67px;border-left:3px solid var(--dr)}
.diagram-atmosphere .p4::before,.diagram-atmosphere .p4::after{left:-6px;border-left:6px solid transparent;border-right:6px solid transparent}
.diagram-atmosphere .p4::before{top:-1px;border-bottom:9px solid var(--dr)}.diagram-atmosphere .p4::after{bottom:-1px;border-top:9px solid var(--dr)}
.diagram-atmosphere .p5{left:44%;top:17%;width:25px;height:20px;background:linear-gradient(#eef5f8,#fff)}
.diagram-atmosphere .p6{left:65%;top:60%;color:var(--dr);font:bold 15px Georgia,serif}.diagram-atmosphere .p6::after{content:"h"}

/* 斜面：高度线竖直，拉力平行斜面，支持力垂直斜面。 */
.diagram-incline .p1{left:15%;bottom:17%;width:72%;height:94px;background:#dfe9ee;clip-path:polygon(0 100%,100% 100%,100% 0)}
.diagram-incline .p1::after{left:0;bottom:0;width:100%;height:5px;background:var(--dl);transform:rotate(-25deg);transform-origin:right}
.diagram-incline .p2{left:51%;top:42%;width:48px;height:38px;border:3px solid #bd773c;border-radius:6px;background:#e5a24e;transform:rotate(-25deg)}
.diagram-incline .p3{left:58%;top:27%;width:27%;border-top:4px solid var(--db);transform:rotate(-25deg);transform-origin:left}
.diagram-incline .p3::after{right:-2px;top:-8px;border-left:11px solid var(--db);border-top:6px solid transparent;border-bottom:6px solid transparent}
.diagram-incline .p4{right:13%;top:29%;height:55%;border-left:3px dashed var(--dr)}
.diagram-incline .p5{left:61%;top:24%;height:31px;border-left:4px solid var(--dr);transform:rotate(25deg)}
.diagram-incline .p5::before{left:-7px;top:-1px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid var(--dr)}
.diagram-incline .p6{right:10%;bottom:15%;width:77%;border-top:3px solid #91a3ae}

/* 滑轮组：绳端固定后绕过动滑轮，再跨过定滑轮，重物挂在动滑轮轴上。 */
.diagram-pulley .p1,.diagram-pulley .p2{width:42px;height:42px;border:5px solid var(--dl);border-radius:50%;background:#fff}
.diagram-pulley .p1{left:57%;top:25%}.diagram-pulley .p2{left:31%;top:56%}
.diagram-pulley .p1::after,.diagram-pulley .p2::after{left:13px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--dl)}
.diagram-pulley .p3{left:28%;top:22%;width:42%;height:73px;border-left:4px solid var(--dr);border-bottom:4px solid var(--dr);border-right:4px solid var(--dr);border-radius:0 0 24px 24px}
.diagram-pulley .p3::before{left:-8px;top:-7px;width:13px;height:9px;border-radius:3px;background:var(--dl)}
.diagram-pulley .p4{left:37%;top:79%;width:28px;height:25px;border-radius:4px;background:var(--dg)}
.diagram-pulley .p4::before{left:12px;top:-16px;width:4px;height:17px;background:var(--dl)}
.diagram-pulley .p5{left:70%;top:45%;height:49px;border-left:4px solid var(--db)}
.diagram-pulley .p5::after{left:-7px;bottom:-1px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--db)}
.diagram-pulley .p6{left:19%;top:20%;width:61%;border-top:4px solid #8096a4}

/* 机械能：小车位于高处轨道，速度方向沿轨道切线。 */
.diagram-energy .p1{left:11%;top:33%;width:78%;height:94px;border:6px solid var(--dl);border-top:0;border-radius:0 0 48% 48%}
.diagram-energy .p2{left:19%;top:29%;width:38px;height:24px;border-radius:7px;background:var(--dr);transform:rotate(14deg)}
.diagram-energy .p2::before,.diagram-energy .p2::after{bottom:-7px;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#385363}.diagram-energy .p2::before{left:3px}.diagram-energy .p2::after{right:3px}
.diagram-energy .p3{left:29%;top:26%;width:23%;border-top:4px solid var(--db);transform:rotate(14deg);transform-origin:left}
.diagram-energy .p3::after{right:-2px;top:-8px;border-left:11px solid var(--db);border-top:6px solid transparent;border-bottom:6px solid transparent}
.diagram-energy .p4{left:18%;top:35%;height:55%;border-left:3px dashed var(--dg)}
.diagram-energy .p5{left:13%;top:88%;width:77%;border-top:3px solid #91a3ae}
.diagram-energy .p6{right:15%;top:24%;width:8px;height:58px;border-radius:4px;background:linear-gradient(to top,var(--db) 0 35%,var(--dg) 35% 67%,var(--dr) 67%)}

/* 惯性：小车向右运动，车上物体保持原运动状态。 */
.diagram-inertia .p1{left:20%;top:58%;width:58%;height:38px;border-radius:7px;background:#28769d}
.diagram-inertia .p1::before,.diagram-inertia .p1::after{bottom:-15px;width:23px;height:23px;border:4px solid #fff;border-radius:50%;background:#344e5d}.diagram-inertia .p1::before{left:10px}.diagram-inertia .p1::after{right:10px}
.diagram-inertia .p2{left:42%;top:33%;width:42px;height:45px;border:3px solid #bd773c;border-radius:6px;background:#e4a04b}
.diagram-inertia .p3{right:8%;top:48%;width:21%;border-top:5px solid var(--dr)}
.diagram-inertia .p3::after{right:-1px;top:-9px;border-left:13px solid var(--dr);border-top:7px solid transparent;border-bottom:7px solid transparent}
.diagram-inertia .p4{left:40%;top:25%;width:48px;border-top:3px dashed var(--db)}
.diagram-inertia .p5{left:13%;top:85%;width:75%;border-top:4px solid #8da0ab}
.diagram-inertia .p6{left:23%;top:52%;width:52%;border-top:3px solid rgba(255,255,255,.7)}

/* 电磁铁：线圈包围水平铁芯，两端磁极与下方电源回路一一对应。 */
.diagram-electromagnet .p1{left:18%;top:45%;width:64%;height:20px;border-radius:3px;background:#6f808a}
.diagram-electromagnet .p1::before{left:-15px;top:5px;width:15px;height:10px;border-radius:6px 0 0 6px;background:#6f808a}
.diagram-electromagnet .p2{left:29%;top:30%;width:42%;height:51px;border:5px solid #c86c3e;border-radius:16px;background:repeating-linear-gradient(90deg,transparent 0 10px,#e28b5a 10px 14px)}
.diagram-electromagnet .p3,.diagram-electromagnet .p4{top:39%;width:28px;height:28px;border:3px solid var(--dl);border-radius:50%;color:var(--dl);background:#fff;font:bold 15px Arial;text-align:center;line-height:22px}
.diagram-electromagnet .p3{left:8%}.diagram-electromagnet .p4{right:8%}.diagram-electromagnet .p3::after{content:"N";position:static}.diagram-electromagnet .p4::after{content:"S";position:static}
.diagram-electromagnet .p5{left:20%;top:74%;width:60%;height:27px;border-left:4px solid var(--db);border-right:4px solid var(--db);border-bottom:4px solid var(--db);border-radius:0 0 8px 8px}
.diagram-electromagnet .p6{left:46%;top:84%;width:25px;height:12px;border-top:3px solid var(--dr);border-bottom:7px solid var(--dr);background:var(--paper)}

/* 四冲程内燃机：气缸、活塞、连杆和曲轴飞轮形成真实传动关系。 */
.diagram-engine .p1{left:24%;top:20%;width:34%;height:99px;border:5px solid var(--dl);border-bottom:0;border-radius:7px 7px 0 0;background:#e7f2f6}
.diagram-engine .p2{left:27%;top:49%;width:28%;height:24px;border:3px solid #b87539;border-radius:4px;background:var(--dg)}
.diagram-engine .p3{left:49%;top:63%;width:39%;height:5px;border-radius:4px;background:var(--dr);transform:rotate(36deg);transform-origin:left}
.diagram-engine .p4{right:12%;bottom:10%;width:48px;height:48px;border:6px solid var(--dl);border-radius:50%;background:#fff}
.diagram-engine .p4::after{left:15px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--dl)}
.diagram-engine .p5,.diagram-engine .p6{top:13%;width:5px;height:28px;background:var(--dr)}
.diagram-engine .p5{left:31%;transform:rotate(-15deg)}.diagram-engine .p6{left:48%;transform:rotate(15deg)}

/* 发电机与电动机：N、S 磁极夹住矩形线圈，线圈通过转轴连接外电路。 */
.diagram-generator .p1{left:15%;top:27%;width:70%;height:88px;border:16px solid var(--dl);border-left-width:23px;border-right-width:23px;border-radius:15px;background:transparent}
.diagram-generator .p1::before{left:-3px;top:17px;width:calc(100% + 6px);height:23px;background:#f2f8fa}
.diagram-generator .p2{left:37%;top:38%;width:26%;height:58px;border:5px solid var(--dr);background:rgba(255,255,255,.5);transform:skewY(-8deg)}
.diagram-generator .p3{left:22%;top:58%;width:56%;height:5px;border-radius:3px;background:var(--dg)}
.diagram-generator .p4,.diagram-generator .p5{top:44%;color:#fff;font:bold 16px Arial}.diagram-generator .p4{left:18%}.diagram-generator .p5{right:18%}.diagram-generator .p4::after{content:"N";position:static}.diagram-generator .p5::after{content:"S";position:static}
.diagram-generator .p6{left:45%;top:78%;width:10%;height:20px;border:4px solid var(--db);border-top:0;border-radius:0 0 7px 7px}

/* 摩擦力：物块放在粗糙水平面上，四个力从物块四周分离画出。 */
.diagram-friction .p1{left:9%;top:75%;width:82%;height:18px;border-top:5px solid var(--dl);background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(34,92,120,.24) 8px 12px)}
.diagram-friction .p2{left:36%;top:42%;width:30%;height:59px;border:4px solid #9d652e;border-radius:7px;background:#e4a04b}
.diagram-friction .p3{left:66%;top:48%;width:24%;border-top:5px solid var(--dr)}
.diagram-friction .p3::after{right:-2px;top:-9px;border-left:12px solid var(--dr);border-top:7px solid transparent;border-bottom:7px solid transparent}
.diagram-friction .p4{left:12%;top:65%;width:24%;border-top:5px solid var(--db)}
.diagram-friction .p4::after{left:-2px;top:-9px;border-right:12px solid var(--db);border-top:7px solid transparent;border-bottom:7px solid transparent}
.diagram-friction .p5{left:50%;top:15%;height:27%;border-left:5px solid var(--dg)}
.diagram-friction .p5::after{left:-8px;top:-2px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid var(--dg)}
.diagram-friction .p6{left:53%;top:66%;height:25%;border-left:5px solid var(--green)}
.diagram-friction .p6::after{left:-8px;bottom:-2px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--green)}

/* 未登录卡片不遮挡原理图；登录提示收纳到卡片底部操作区。 */
.model-card.locked .lock-layer{inset:auto 14px 14px;height:52px;display:flex;align-items:center;justify-content:flex-start;flex-direction:row;gap:8px;padding:8px 9px;border:1px solid #cfe0e8;border-radius:10px;background:#f2f8fa;box-shadow:0 7px 18px rgba(28,63,89,.08)}
.model-card.locked .lock-layer>span{width:30px;height:30px;border-radius:8px;font-size:12px;transform:none}
.model-card.locked .lock-layer b{margin:0;font-size:12px}
.model-card.locked .lock-layer a{margin-left:auto;padding:7px 10px}

/* 学习额度、会员中心和新增卡片状态。 */
.credit-badge,.member-badge{position:absolute;z-index:3;right:13px;bottom:11px;padding:5px 8px;border-radius:6px;color:#fff;font-size:10px;font-style:normal;font-weight:900}
.credit-badge{background:#b77922}
.member-badge{background:#7755a7}
.gallery-head .quota-empty{color:#8c4a43;background:#ffebe8}
.gallery-head .quota-empty a{color:var(--red);font-weight:900}
.account-page{grid-template-columns:minmax(260px,340px) minmax(360px,460px);gap:22px}
.account-summary{align-self:stretch;padding:34px;border:1px solid #cde0ea;border-radius:18px;color:#fff;background:linear-gradient(145deg,#165478,#168b8b);box-shadow:0 16px 42px rgba(25,60,85,.12)}
.account-summary>p{margin:0 0 18px;color:#ccecf1;font-size:11px;font-weight:900;letter-spacing:.16em}
.account-summary h1{margin:0;font-size:32px}
.account-plan{display:grid;gap:5px;margin:30px 0;padding:19px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:rgba(255,255,255,.1)}
.account-plan b{font-size:23px}
.account-plan span{color:#d7f3f1;font-size:13px}
.account-summary>a{display:inline-block;padding:10px 13px;border-radius:8px;color:#165478;background:#fff;font-size:13px;font-weight:900}
.membership-heading{padding-bottom:20px}
.membership-layout{display:grid;grid-template-columns:minmax(290px,.75fr) minmax(420px,1.25fr);gap:18px}
.membership-status,.membership-offer{padding:32px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 14px 35px rgba(28,63,89,.07)}
.membership-status>span,.offer-label{color:var(--green);font-size:11px;font-weight:900;letter-spacing:.15em}
.membership-status h2,.membership-offer h2{margin:7px 0 16px;font-size:30px}
.membership-status>p,.membership-offer>p{color:#687d8e;line-height:1.75}
.status-chip{width:max-content;padding:10px 13px;border-radius:9px;font-size:13px;font-weight:900}
.status-chip.permanent{color:#6b4a91;background:#efe7fa}
.quota-number{display:flex;align-items:end;gap:10px;margin:24px 0 15px}
.quota-number b{color:var(--blue);font:900 72px Georgia,serif;line-height:.85}
.quota-number span{color:#687d8e;font-weight:800}
.membership-offer{position:relative;overflow:hidden;border-color:#c8dce8}
.membership-offer::after{position:absolute;right:-58px;top:-58px;width:170px;height:170px;border:28px solid rgba(22,134,199,.07);border-radius:50%;content:""}
.offer-price{position:relative;z-index:1;display:flex;align-items:baseline;gap:13px;margin:20px 0}
.offer-price del{color:#91a1ac;font-size:18px}
.offer-price b{color:var(--red);font-size:48px;letter-spacing:-.04em}
.membership-offer ul{display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.membership-offer li{color:#526d7f;font-size:14px;font-weight:700}
.membership-offer li::before{margin-right:9px;color:var(--green);content:"✓"}
.promo-form label{display:grid;gap:7px;color:#536a7c;font-size:12px;font-weight:900}
.promo-form label>span{display:grid;grid-template-columns:1fr auto;gap:8px}
.promo-form input{height:44px;padding:0 12px;border:1px solid #cbd9e3;border-radius:8px;outline:0;text-transform:uppercase}
.promo-form button,.promo-create-form>button{padding:0 17px;border:0;border-radius:8px;color:#fff;background:var(--blue);font-weight:900}
.pay-disabled{width:100%;height:48px;margin-top:13px;border:0;border-radius:9px;color:#738895;background:#e8eff3;font-weight:900;cursor:not-allowed}
.membership-offer>small{display:block;margin-top:9px;color:#8294a1;line-height:1.6}
.already-open{margin-top:26px;padding:16px;border-radius:10px;color:#176f5d;background:#e5f6f0;font-weight:900}

/* 管理员会员、优惠码与订单操作。 */
.member-admin-list{display:grid;gap:9px}
.member-admin-card{display:grid;grid-template-columns:minmax(150px,1fr) 150px minmax(220px,auto) minmax(250px,1fr);align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:10px}
.member-admin-identity{display:grid}
.member-admin-identity small{color:#8496a3;font-size:11px}
.member-admin-state{display:flex;align-items:center;justify-content:space-between;gap:8px}
.member-admin-state strong{color:var(--blue)}
.member-admin-actions{display:flex;gap:7px}
.member-admin-actions form{flex:1}
.member-admin-actions button{width:100%;height:38px}
.member-button,.soft-button,.soft-danger,.reset-password-form button,.promo-list button{padding:0 10px;border:1px solid transparent;border-radius:7px;font-weight:800}
.member-button{color:#fff;background:var(--green)}
.soft-button{color:#25627f;border-color:#cbdce6;background:#edf5f8}
.soft-danger{color:#a74740;border-color:#f0c7c3;background:#fff0ee}
.reset-password-form{display:grid;grid-template-columns:1fr auto;gap:7px}
.reset-password-form input{height:38px;min-width:0;padding:0 10px;border:1px solid #cbd9e3;border-radius:7px}
.reset-password-form button{color:#fff;background:var(--blue)}
.promo-create-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:10px;margin-bottom:13px;padding:14px;border-radius:10px;background:#f1f7fa}
.promo-create-form label{display:grid;gap:5px;color:#526b7c;font-size:11px;font-weight:900}
.promo-create-form input{height:40px;padding:0 10px;border:1px solid #cad9e2;border-radius:7px}
.promo-create-form>button{height:40px}
.promo-list,.order-list{overflow:hidden;border:1px solid var(--line);border-radius:10px}
.promo-list>div,.order-list>div{display:grid;grid-template-columns:1fr .55fr .8fr 1fr auto;align-items:center;gap:10px;padding:11px 13px;border-top:1px solid var(--line);font-size:12px}
.promo-list>div:first-child,.order-list>div:first-child{border-top:0}
.promo-list span,.order-list span,.order-list time{color:#6e8291}
.order-list strong{color:var(--blue)}

@media(max-width:1100px){
  .member-admin-card{grid-template-columns:1fr 150px}
  .promo-create-form{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .account-page,.membership-layout{grid-template-columns:1fr}
  .account-page{padding-top:24px}
  .member-admin-card{grid-template-columns:1fr}
  .promo-create-form{grid-template-columns:1fr}
  .promo-create-form>button{height:44px}
  .promo-list>div,.order-list>div{grid-template-columns:1fr 1fr}
  .promo-list form{justify-self:end}
  .membership-status,.membership-offer{padding:24px 20px}
}
@media(max-width:900px){
  .site-header nav .nav-login,.site-header nav .nav-member{display:inline-flex!important}
}
.nav-mobile-auth{display:none}
@media(max-width:600px){
  .site-header nav .nav-login,.site-header nav .nav-cta{display:none!important}
  .site-header nav .nav-mobile-auth{display:inline-flex!important}
}