.materials-intro{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(115deg,var(--surface),var(--brand-soft));padding:22px 28px}.material-eyebrow{font-size:10px;letter-spacing:.16em;color:var(--brand)}.materials-intro h2{font-size:23px;font-weight:550;line-height:1.5;letter-spacing:-.03em;margin:13px 0 8px;color:var(--ink)}.materials-intro p{font-size:12px;color:var(--secondary);line-height:1.9;margin:0;max-width:540px}.material-overview{display:flex;gap:28px;flex-shrink:0}.material-overview>div{display:flex;flex-direction:column;gap:7px}.material-overview strong{font-size:27px;font-weight:500;color:var(--brand)}.material-overview span{font-size:11px;color:var(--secondary)}.materials-status{display:flex;gap:9px;align-items:center;font-size:11px;line-height:1.8;color:var(--muted);padding:16px 2px}.materials-status svg{width:15px;height:15px}.materials-controls{margin:8px 0 20px}.material-category-tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:15px}.material-category-tabs button{font-size:12px;padding:9px 16px;border-radius:999px;color:var(--secondary)}.material-category-tabs button:hover,.material-category-tabs button.active{background:var(--brand-soft);color:var(--brand)}.material-category-tabs button.active{box-shadow:inset 0 0 0 1px #9b73ff30;font-weight:600}.materials-filter-row{display:flex;align-items:center;gap:20px;padding-top:16px;flex-wrap:wrap}.materials-filter-row .search{margin-right:auto}.materials-filter-row .search input{width:250px}.materials-filter-row label{display:flex;align-items:center;gap:6px;color:var(--secondary);font-size:11px}.materials-filter-row input[type=checkbox]{accent-color:var(--brand)}.material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:95px}.material-card{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden;transition:box-shadow .15s,transform .15s}.material-card:hover{box-shadow:0 8px 30px #54346d13;transform:translateY(-2px)}.material-card-body{padding:15px 18px}.material-kicker{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;gap:10px}.material-star{font-size:21px;line-height:1;color:var(--muted);padding:4px}.material-star.active{color:var(--brand)}.material-title{padding:0;display:block;text-align:left;font-size:15px;line-height:1.6;font-weight:600;color:var(--ink);margin:8px 0}.material-card-body>p{color:var(--secondary);font-size:12px;line-height:1.85;min-height:44px;margin:8px 0 15px}.material-tags{display:flex;gap:7px;flex-wrap:wrap}.material-tags span{font-size:9px;color:var(--secondary);border:1px solid var(--border);border-radius:5px;padding:4px 7px}.material-card-foot{border-top:1px solid var(--border);padding-top:13px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:7px}.material-card-foot>div{display:flex;align-items:center;gap:10px}.material-card-foot .text-button{font-size:10px}.material-state{font-size:10px;color:var(--muted)}.material-state.ready{color:var(--brand)}.material-state:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:2px}.material-art{position:relative;height:160px;padding:16px 20px 28px;background:#221b31;color:#bba7da;border-bottom:1px solid var(--border);overflow:hidden}.art-caption{font-size:8px;letter-spacing:.13em;color:inherit;opacity:.8}.art-label{position:absolute;bottom:9px;left:20px;font-size:9px;color:inherit;opacity:.85}.rank-preview{font-size:10px;margin:10px auto 0;max-width:290px}.rank-preview>div{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #9b73ff20}.rank-preview>div:first-child{padding-top:0;font-size:8px;justify-content:space-between}.rank-preview b{font-weight:400}.rank-preview i{font-style:normal}.rank-preview em{width:30%;height:3px;border-radius:5px;background:#9b73ff3a;margin-left:auto}.rank-preview>div:nth-child(3) em{width:22%}.rank-preview>div:nth-child(4) em{width:15%}.art-comparison{background:#1a2034}.art-showcase{background:#202236}.compare-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.compare-preview>div{height:90px;border:1px solid #a18dca40;background:#b197db0b;border-radius:6px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.compare-preview span{font-size:8px;align-self:flex-start}.compare-preview b{font-size:23px;font-weight:400}.compare-preview small{font-size:8px}.video-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;height:105px;margin-top:4px;gap:7px;background:radial-gradient(ellipse,#a28bd524,transparent 70%)}.video-preview b{font-size:31px;font-weight:400}.video-preview span{font-size:9px}.video-line{width:80%;height:2px;background:#b29bc62b;margin-top:8px}.art-pricing{background:#252034}.price-preview{display:grid;grid-template-columns:1fr 1fr;margin-top:13px}.price-preview>div{display:flex;flex-direction:column;align-items:center;gap:9px;padding:7px}.price-preview>div+div{border-left:1px solid #a88dcc35}.price-preview span,.price-preview small{font-size:9px}.price-preview strong{font-size:22px;font-weight:500}.guide-preview{display:flex;align-items:center;flex-direction:column;gap:9px;margin-top:14px}.guide-preview svg{height:28px;width:28px}.guide-preview span{font-size:10px}.guide-preview i{width:65%;height:3px;background:#9b73ff22}.guide-preview i:last-child{width:45%}.material-empty{grid-column:1/-1;text-align:center;padding:65px 20px;border:1px dashed var(--border);border-radius:12px;color:var(--secondary)}.material-empty h3{font-size:16px}.material-empty p{font-size:12px}.material-selection-bar{position:fixed;bottom:20px;left:calc(50% + 60px);transform:translateX(-50%);width:min(780px,calc(100vw - 280px));display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid #9b73ff66;border-radius:13px;padding:14px 20px;box-shadow:0 10px 40px #0002;z-index:9}.material-selection-bar>div{min-width:0;flex:1}.material-selection-bar strong{font-size:12px}.material-selection-bar p{font-size:10px;color:var(--secondary);margin:6px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.material-modal{max-width:1040px;width:calc(100% - 40px)}.material-modal .modal-body{padding:24px;max-height:calc(90vh - 78px);overflow:auto}.material-preview-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:28px}.art-large{height:280px;border-radius:12px;border:1px solid var(--border);padding:24px}.art-large .art-caption{font-size:10px}.art-large .rank-preview{margin-top:27px;font-size:13px}.art-large .rank-preview>div{padding:12px 0}.art-large .compare-preview{margin-top:27px}.art-large .compare-preview>div{height:160px;padding:14px}.art-large .compare-preview span,.art-large .compare-preview small{font-size:11px}.art-large .video-preview{height:185px}.art-large .price-preview{margin-top:45px}.art-large .price-preview>div{gap:18px}.art-large .price-preview strong{font-size:32px}.art-large .guide-preview{margin-top:45px;gap:18px}.material-preview-caption{font-size:11px;line-height:1.8;color:var(--muted);margin:14px 0}.material-preview-info h3{font-size:13px;margin:20px 0 8px;color:var(--ink)}.material-preview-info p,.material-preview-info li{color:var(--secondary);font-size:12px;line-height:1.9}.material-preview-info ul{padding-left:17px}.material-preview-info dl{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:9px 0;margin:15px 0;font-size:11px;line-height:1.8}.material-preview-info dl>div{display:grid;grid-template-columns:85px 1fr;gap:12px;margin:7px 0}.material-preview-info dt{color:var(--muted)}.material-preview-info dd{margin:0;color:var(--ink)}.material-preview-actions{display:flex;gap:10px;margin-top:20px}.material-side-item{width:100%;display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--border);text-align:left}.material-side-item>span:not(.material-side-icon){flex:1;min-width:0}.material-side-item strong{font-size:11px;line-height:1.6;font-weight:550;color:var(--ink)}.material-side-item small{display:block;font-size:9px;line-height:1.8;color:var(--muted);margin-top:5px}.material-side-icon{background:var(--brand-soft);color:var(--brand);padding:8px;border-radius:8px}.material-side-icon svg{height:16px;width:16px}.material-side-item>svg{width:13px;color:var(--muted)}#material-side-search{width:100%;font-size:11px}.tool-tile[data-id=materials]{grid-column:1/-1}.material-shortlist{margin:15px 0}
[data-theme=light] .material-art{background:#f0e9fa;color:#85649e}[data-theme=light] .art-showcase{background:#edf0fc;color:#757ea5}[data-theme=light] .art-comparison{background:#eaeefa;color:#69799f}[data-theme=light] .art-pricing{background:#f0e9f8;color:#8a699f}[data-theme=light] .art-trust{background:#f3ecf8;color:#9273a3}
@media(max-width:1150px){.material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.materials-intro{padding:24px;gap:20px;align-items:flex-start}.material-overview{gap:18px}.materials-intro h2{font-size:20px}.material-overview span{font-size:10px}}
@media(max-width:850px){.materials-intro{flex-direction:column}.material-overview{gap:35px}.material-selection-bar{left:calc(50% + 34px);width:calc(100vw - 100px)}.material-preview-layout{grid-template-columns:1fr}.art-large{height:230px}.material-category-tabs button{padding:8px 10px;font-size:11px}.materials-filter-row{gap:12px}}
@media(max-width:650px){.material-grid{grid-template-columns:1fr;gap:16px}.materials-intro{padding:20px}.materials-intro h2{font-size:21px}.materials-status{align-items:flex-start}.materials-filter-row .search{width:100%;margin:0}.materials-filter-row .search input{width:100%}.material-selection-bar{left:12px;transform:none;width:calc(100vw - 24px);bottom:72px;padding:12px;gap:7px}.material-selection-bar p{max-width:130px}.material-modal{width:calc(100% - 20px)}.material-modal .modal-body{padding:16px}.material-overview{gap:30px}.material-preview-actions{flex-wrap:wrap}.page-head:has(+ .materials-intro){align-items:flex-start;flex-direction:column;gap:10px}.material-card-body>p{min-height:0}}