.sample-prototype{--ink: #172c32; --muted: #718389; --line: #e2e9e7; --bg: #f4f7f5; --paper: #fff; --brand: #177c65; --brand-dark: #11604e; --soft: #e9f5ee; --amber: #b37521; --amber-soft: #fff5e3; --red: #b34747; --red-soft: #fff0ef; --nav: #142e2d; --radius: 14px; --shadow: 0 12px 40px #12392b08;}
.sample-prototype *{box-sizing: border-box;}
.sample-prototype{margin: 0px; background: var(--bg); color: var(--ink); font: 14px / 1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;}
.sample-prototype button,.sample-prototype input,.sample-prototype textarea,.sample-prototype select{font: inherit;}
.sample-prototype button,.sample-prototype a,.sample-prototype input,.sample-prototype textarea,.sample-prototype select{-webkit-tap-highlight-color: transparent;}
.sample-prototype button{cursor: pointer;}
.sample-prototype button:disabled{cursor: not-allowed; opacity: 0.43;}
.sample-prototype button:focus-visible,.sample-prototype a:focus-visible{outline: rgb(103, 183, 159) solid 3px; outline-offset: 3px;}
.sample-prototype input:focus,.sample-prototype select:focus,.sample-prototype textarea:focus{outline: rgb(190, 224, 211) solid 2px; outline-offset: 1px; border-color: var(--brand);}
.sample-prototype h1,.sample-prototype h2,.sample-prototype h3,.sample-prototype h4,.sample-prototype p{margin: 0px;}
.sample-prototype h1{font-size: 30px; letter-spacing: -1px; line-height: 1.2; font-weight: 730;}
.sample-prototype h2{font-size: 20px; letter-spacing: -0.5px; line-height: 1.3;}
.sample-prototype h3{font-size: 15px; font-weight: 700; line-height: 1.4;}
.sample-prototype h4{font-size: 13px; font-weight: 700;}
.sample-prototype a{color: var(--brand);}
.sample-prototype small,.sample-prototype .small{font-size: 12px;}
.sample-prototype .muted{color: var(--muted);}
.sample-prototype .mono{font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: 0.25px;}
.sample-prototype .eyebrow{font-size: 10px; text-transform: uppercase; font-weight: 750; letter-spacing: 1.55px; color: var(--muted);}
.sample-prototype .icon{width: 19px; height: 19px; flex-shrink: 0; vertical-align: middle;}
.sample-prototype .flex{display: flex; align-items: center; gap: 10px;}
.sample-prototype .between{display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.sample-prototype .wrap{flex-wrap: wrap;}
.sample-prototype .stack{display: grid; gap: 18px;}
.sample-prototype .gap8{gap: 8px;}
.sample-prototype .mt8{margin-top: 8px;}
.sample-prototype .mt12{margin-top: 12px;}
.sample-prototype .mt16{margin-top: 16px;}
.sample-prototype .mt24{margin-top: 24px;}
.sample-prototype .mb16{margin-bottom: 16px;}
.sample-prototype .nowrap{white-space: nowrap;}
.sample-prototype .text-right{text-align: right;}
.sample-prototype .wfull{width: 100%;}
.sample-prototype .sr-only{position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;}
.sample-prototype .sidebar{position: fixed; left: 0px; top: 0px; bottom: 0px; width: 220px; background: var(--nav); color: rgb(216, 229, 223); z-index: 30; padding: 30px 19px; display: flex; flex-direction: column;}
.sample-prototype .brand{display: flex; align-items: center; gap: 12px; padding: 0px 8px 38px;}
.sample-prototype .brand-symbol{width: 35px; height: 35px; border: 1px solid rgb(118, 153, 142); border-radius: 11px; display: grid; place-items: center; font-size: 23px; color: rgb(193, 225, 206); font-weight: 700;}
.sample-prototype .brand-name{font-size: 18px; color: rgb(255, 255, 255); font-weight: 720; letter-spacing: -0.5px;}
.sample-prototype .brand-sub{font-size: 9px; letter-spacing: 2.7px; color: rgb(148, 179, 166); font-weight: 500;}
.sample-prototype .nav-section{font-size: 9px; letter-spacing: 1.6px; color: rgb(120, 150, 138); font-weight: 750; margin: 0px 13px 12px;}
.sample-prototype .nav-button{border: 0px; background: transparent; color: rgb(174, 194, 185); width: 100%; padding: 13px; display: flex; align-items: center; gap: 12px; border-radius: 9px; text-align: left; font-size: 13px; margin-bottom: 5px; transition: 0.15s;}
.sample-prototype .nav-button:hover{background: rgb(36, 67, 60);}
.sample-prototype .nav-button.active{background: rgb(43, 80, 68); color: rgb(224, 243, 229);}
.sample-prototype .nav-button .icon{width: 18px; height: 18px;}
.sample-prototype .nav-button .count{margin-left: auto; font-size: 10px; background: rgba(255, 255, 255, 0.07); border-radius: 5px; padding: 1px 6px;}
.sample-prototype .nav-bottom{margin-top: auto; padding: 18px 12px 0px; border-top: 1px solid rgb(54, 82, 71);}
.sample-prototype .demo-dot{width: 6px; height: 6px; border-radius: 50%; background: rgb(144, 203, 176); display: inline-block; margin-right: 6px;}
.sample-prototype .sidebar small{color: rgb(145, 178, 161); line-height: 1.6;}
.sample-prototype .workspace-label{margin: 8px 8px 28px; padding: 12px; border: 1px solid rgb(59, 85, 76); border-radius: 10px; font-size: 11px;}
.sample-prototype .workspace-label strong{font-size: 12px; color: rgb(227, 234, 229); display: block;}
.sample-prototype .page{margin-left: 220px; min-height: 100vh;}
.sample-prototype .topbar{height: 73px; background: rgb(255, 255, 255); border-bottom: 1px solid var(--line); padding: 0px 35px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.sample-prototype .crumb{display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted);}
.sample-prototype .crumb strong{color: var(--ink); font-weight: 600;}
.sample-prototype .header-actions{display: flex; align-items: center; gap: 12px;}
.sample-prototype .top-pill{font-size: 10px; font-weight: 650; color: var(--brand); border: 1px solid rgb(208, 230, 215); padding: 5px 9px; border-radius: 5px; letter-spacing: 0.6px;}
.sample-prototype .avatar{height: 31px; width: 31px; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: rgb(240, 230, 215); border: 2px solid white; color: rgb(146, 114, 79); font-size: 10px; font-weight: 700;}
.sample-prototype .avatar.alt{background: rgb(226, 237, 244); color: rgb(84, 116, 140);}
.sample-prototype .avatar.green{background: rgb(226, 239, 231); color: rgb(83, 122, 100);}
.sample-prototype .avatar.purple{background: rgb(234, 228, 242); color: rgb(130, 113, 149);}
.sample-prototype .main{padding: 28px 35px 40px; max-width: 1600px; margin: auto;}
.sample-prototype .prototype-note{display: flex; align-items: center; gap: 8px; border: 1px solid rgb(227, 232, 211); background: rgb(243, 246, 233); border-radius: 7px; padding: 8px 12px; font-size: 11px; color: rgb(102, 112, 84); margin-bottom: 26px;}
.sample-prototype .prototype-note .icon{width: 14px; height: 14px;}
.sample-prototype .btn{display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgb(220, 229, 223); background: white; border-radius: 8px; padding: 9px 13px; font-size: 12px; font-weight: 650; color: var(--ink); text-decoration: none; white-space: nowrap; transition: 0.15s; min-height: 37px;}
.sample-prototype .btn:hover:not(:disabled){background: rgb(245, 248, 245); border-color: rgb(180, 203, 188);}
.sample-prototype .btn .icon{width: 16px; height: 16px;}
.sample-prototype .btn.primary{background: var(--brand); color: white; border-color: var(--brand);}
.sample-prototype .btn.primary:hover:not(:disabled){background: var(--brand-dark);}
.sample-prototype .btn.soft{background: var(--soft); color: var(--brand); border-color: rgb(215, 233, 223);}
.sample-prototype .btn.danger{color: var(--red); background: var(--red-soft); border-color: rgb(241, 210, 208);}
.sample-prototype .btn.ghost{border-color: transparent; background: transparent;}
.sample-prototype .btn.ghost:hover:not(:disabled){background: rgb(234, 240, 235);}
.sample-prototype .btn.small{padding: 6px 9px; font-size: 11px; min-height: 30px;}
.sample-prototype .icon-btn{border: 1px solid var(--line); border-radius: 7px; padding: 6px; background: white; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; min-width: 29px; min-height: 29px;}
.sample-prototype .icon-btn:hover{background: var(--soft); color: var(--brand);}
.sample-prototype .mobile-menu{display: none;}
.sample-prototype .page-title{margin: 6px 0px 26px;}
.sample-prototype .page-title p{font-size: 12px; color: var(--muted); margin-top: 9px; line-height: 1.7;}
.sample-prototype .date-chip{font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px;}
.sample-prototype .grid-metrics{display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 26px;}
.sample-prototype .metric{background: white; border: 1px solid var(--line); border-radius: 11px; padding: 17px 19px; box-shadow: rgba(0, 0, 0, 0.004) 0px 2px 4px; position: relative;}
.sample-prototype .metric-top{display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 600; margin-bottom: 10px;}
.sample-prototype .metric-top .icon{height: 16px; width: 16px; color: rgb(161, 180, 167);}
.sample-prototype .metric-num{font-size: 29px; letter-spacing: -1px; font-weight: 700; line-height: 1.2;}
.sample-prototype .metric-foot{font-size: 10px; color: var(--muted); margin-top: 6px;}
.sample-prototype .metric.active{border-color: rgb(191, 218, 202); background: rgb(240, 247, 241);}
.sample-prototype .metric.active .metric-num{color: var(--brand);}
.sample-prototype .delta{font-size: 10px; background: rgb(231, 242, 232); border-radius: 4px; padding: 2px 5px; color: var(--brand); font-weight: 600;}
.sample-prototype .dashboard-grid{display: grid; grid-template-columns: minmax(0px, 1fr) 278px; gap: 22px;}
.sample-prototype .card{background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;}
.sample-prototype .card-head{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px 23px 17px;}
.sample-prototype .card-body{padding: 22px 23px;}
.sample-prototype .card-head + .card-body{padding-top: 0px;}
.sample-prototype .section-intro{font-size: 12px; color: var(--muted); margin-top: 6px; max-width: 760px; line-height: 1.7;}
.sample-prototype .table-tools{display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0px 23px 17px;}
.sample-prototype .segmented{display: flex; gap: 3px; padding: 3px; background: rgb(241, 245, 242); border-radius: 7px; flex-wrap: wrap;}
.sample-prototype .segment{background: transparent; border: 0px; border-radius: 5px; color: var(--muted); font-size: 10px; font-weight: 650; padding: 7px 10px; white-space: nowrap;}
.sample-prototype .segment.active{background: white; color: var(--brand); box-shadow: rgba(0, 0, 0, 0.047) 0px 1px 3px;}
.sample-prototype .segment .num{font-size: 9px; margin-left: 5px; color: rgb(144, 163, 154);}
.sample-prototype .searchbox{position: relative; width: 210px; min-width: 0px;}
.sample-prototype .searchbox .icon{position: absolute; left: 11px; top: 10px; width: 15px; height: 15px; color: rgb(145, 163, 152);}
.sample-prototype .searchbox input{width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px 8px 33px; font-size: 11px; background: white; min-width: 0px;}
.sample-prototype .table-wrap{overflow: auto;}
.sample-prototype .data-table{width: 100%; border-collapse: collapse; text-align: left;}
.sample-prototype .data-table th{font-size: 9px; font-weight: 650; color: rgb(134, 149, 140); text-transform: uppercase; letter-spacing: 0.8px; background: rgb(251, 252, 250); padding: 11px 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap;}
.sample-prototype .data-table td{padding: 17px; border-bottom: 1px solid rgb(237, 241, 237); font-size: 12px; vertical-align: middle;}
.sample-prototype .data-table tr:last-child td{border-bottom: 0px;}
.sample-prototype .data-table tr.clickrow{cursor: pointer;}
.sample-prototype .data-table tr.clickrow:hover{background: rgb(248, 251, 248);}
.sample-prototype .data-table .product-name{font-size: 12px; font-weight: 700; color: var(--ink); display: block;}
.sample-prototype .product-sub{font-size: 10px; color: var(--muted); margin-top: 3px;}
.sample-prototype .garment-thumb{width: 44px; height: 51px; background: rgb(237, 242, 237); border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; overflow: hidden;}
.sample-prototype .garment-thumb svg{width: 38px; height: 44px;}
.sample-prototype .badge{display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; font-size: 9px; line-height: 1.3; font-weight: 650; border-radius: 5px; white-space: nowrap; background: rgb(240, 243, 242); color: rgb(109, 123, 117);}
.sample-prototype .badge::before{content: ""; width: 4px; height: 4px; display: inline-block; border-radius: 50%; background: currentcolor;}
.sample-prototype .badge.green{background: rgb(234, 245, 237); color: rgb(56, 129, 99);}
.sample-prototype .badge.amber{background: rgb(255, 244, 225); color: rgb(183, 130, 52);}
.sample-prototype .badge.red{background: rgb(255, 240, 237); color: rgb(194, 103, 88);}
.sample-prototype .badge.blue{background: rgb(234, 242, 248); color: rgb(92, 128, 155);}
.sample-prototype .badge.purple{background: rgb(241, 236, 247); color: rgb(134, 113, 156);}
.sample-prototype .progress{height: 4px; border-radius: 10px; background: rgb(232, 239, 234); overflow: hidden;}
.sample-prototype .progress > span{height: 100%; display: block; border-radius: 10px; background: rgb(104, 172, 143);}
.sample-prototype .progress-wrap{width: 90px; max-width: 100%;}
.sample-prototype .progress-label{font-size: 9px; color: var(--muted); margin-top: 5px;}
.sample-prototype .list-footer{padding: 12px 22px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); display: flex; justify-content: space-between;}
.sample-prototype .attention-card{background: rgb(238, 244, 234); border: 1px solid rgb(220, 231, 210); padding: 23px 21px; border-radius: var(--radius);}
.sample-prototype .attention-card .eyebrow{color: rgb(117, 145, 111);}
.sample-prototype .attention-card h3{font-size: 18px; letter-spacing: -0.35px; margin-top: 12px; line-height: 1.35;}
.sample-prototype .attention-card p{font-size: 11px; line-height: 1.8; color: rgb(123, 140, 116); margin: 9px 0px 19px;}
.sample-prototype .attention-card .icon{color: rgb(101, 141, 101);}
.sample-prototype .taskline{padding: 12px 0px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 9px; font-size: 11px;}
.sample-prototype .taskline:last-child{border: 0px;}
.sample-prototype .task-dot{width: 23px; height: 23px; background: rgb(245, 243, 236); display: grid; place-items: center; color: rgb(163, 146, 106); border-radius: 6px; flex-shrink: 0;}
.sample-prototype .task-dot .icon{width: 13px; height: 13px;}
.sample-prototype .taskline strong{font-size: 11px; font-weight: 650; display: block; margin-bottom: 3px;}
.sample-prototype .taskline p{font-size: 10px; color: var(--muted);}
.sample-prototype .mini-link{border: 0px; background: transparent; color: var(--brand); font-size: 11px; font-weight: 650; text-align: left; padding: 0px; cursor: pointer;}
.sample-prototype .timeline{display: grid; gap: 0px;}
.sample-prototype .timeline-item{position: relative; padding: 0px 0px 20px 22px; border-left: 1px solid rgb(220, 230, 223); margin-left: 5px;}
.sample-prototype .timeline-item:last-child{border-left-color: transparent; padding-bottom: 0px;}
.sample-prototype .timeline-item::before{content: ""; width: 7px; height: 7px; background: rgb(173, 199, 181); border: 2px solid white; box-sizing: content-box; border-radius: 50%; position: absolute; left: -6px; top: 3px;}
.sample-prototype .timeline-item strong{font-size: 11px; font-weight: 650; display: block;}
.sample-prototype .timeline-item p{font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.6;}
.sample-prototype .section-label{display: flex; align-items: center; gap: 8px; margin-bottom: 14px;}
.sample-prototype .section-label .icon{width: 16px; height: 16px; color: rgb(141, 169, 152);}
.sample-prototype .empty{text-align: center; padding: 45px 25px; color: var(--muted);}
.sample-prototype .empty .empty-icon{width: 50px; height: 50px; border-radius: 13px; background: rgb(241, 245, 239); display: grid; place-items: center; margin: 0px auto 16px; color: rgb(131, 163, 139);}
.sample-prototype .empty h3{color: var(--ink); margin-bottom: 7px;}
.sample-prototype .empty p{font-size: 12px; max-width: 400px; margin: 0px auto 18px; line-height: 1.8;}
.sample-prototype .detail-back{display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; border: 0px; background: transparent; padding: 0px; margin-bottom: 22px;}
.sample-prototype .detail-heading{display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;}
.sample-prototype .detail-heading h1{font-size: 28px; margin-top: 6px;}
.sample-prototype .detail-sub{display: flex; align-items: center; gap: 15px; color: var(--muted); font-size: 11px; margin-top: 12px; flex-wrap: wrap;}
.sample-prototype .detail-sub .icon{height: 13px; width: 13px;}
.sample-prototype .detail-thumb{width: 66px; height: 73px; background: rgb(231, 239, 230); border: 1px solid rgb(220, 231, 220); border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;}
.sample-prototype .detail-thumb svg{width: 59px; height: 65px;}
.sample-prototype .detail-metrics{display: flex; gap: 0px; border: 1px solid var(--line); background: rgb(255, 255, 255); border-radius: 11px; margin: 24px 0px 20px;}
.sample-prototype .detail-metric{padding: 14px 23px; flex: 1 1 0%; border-right: 1px solid var(--line);}
.sample-prototype .detail-metric:last-child{border: 0px;}
.sample-prototype .detail-metric .label{font-size: 10px; color: var(--muted); display: block;}
.sample-prototype .detail-metric strong{display: block; font-size: 18px; font-weight: 700; margin-top: 4px;}
.sample-prototype .detail-metric strong .badge{font-weight: 650; vertical-align: middle; margin-left: 8px;}
.sample-prototype .workflow{background: white; border: 1px solid var(--line); border-radius: 11px; padding: 16px 20px 13px; margin-bottom: 23px;}
.sample-prototype .workflow-title{display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10px; color: var(--muted); margin-bottom: 14px;}
.sample-prototype .steps{display: flex; overflow-x: auto; gap: 0px; padding-bottom: 5px; scrollbar-width: thin;}
.sample-prototype .step{display: flex; flex-direction: column; gap: 8px; min-width: 98px; flex: 1 1 0%; position: relative; border: 0px; background: transparent; color: rgb(147, 162, 150); text-align: left; padding: 0px 8px 0px 0px;}
.sample-prototype .step::before{content: ""; height: 1px; background: rgb(225, 233, 224); position: absolute; left: 26px; right: 0px; top: 11px;}
.sample-prototype .step:last-child::before{display: none;}
.sample-prototype .step-dot{display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgb(220, 229, 220); border-radius: 50%; font-size: 9px; font-weight: 700; position: relative; background: white; z-index: 1;}
.sample-prototype .step-dot .icon{width: 12px; height: 12px;}
.sample-prototype .step-label{font-size: 9px; font-weight: 650; line-height: 1.5; max-width: 83px;}
.sample-prototype .step.done{color: rgb(86, 130, 100);}
.sample-prototype .step.done .step-dot{background: rgb(234, 244, 232); border-color: rgb(212, 232, 207); color: rgb(98, 149, 94);}
.sample-prototype .step.done::before{background: rgb(201, 223, 199);}
.sample-prototype .step.current{color: var(--brand);}
.sample-prototype .step.current .step-dot{background: var(--brand); border-color: var(--brand); color: white; box-shadow: rgb(231, 241, 233) 0px 0px 0px 3px;}
.sample-prototype .tabbar{display: flex; gap: 20px; border-bottom: 1px solid rgb(220, 229, 222); margin-bottom: 23px; overflow-x: auto; scrollbar-width: thin;}
.sample-prototype .tab{border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: none; padding: 0px 0px 13px; font-size: 11px; font-weight: 650; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 6px;}
.sample-prototype .tab.active{color: var(--brand); border-color: var(--brand);}
.sample-prototype .tab .icon{width: 14px; height: 14px;}
.sample-prototype .tab-count{font-size: 9px; padding: 1px 4px; border-radius: 4px; background: rgb(234, 241, 234); color: rgb(98, 137, 106);}
.sample-prototype .detail-grid{display: grid; grid-template-columns: minmax(0px, 1fr) 285px; gap: 23px;}
.sample-prototype .info-grid{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 21px;}
.sample-prototype .info-item .label{display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px;}
.sample-prototype .info-item strong{font-size: 12px; font-weight: 600;}
.sample-prototype .note-box{border: 1px solid rgb(230, 236, 223); background: rgb(247, 250, 243); border-radius: 8px; padding: 12px 14px; font-size: 11px; color: rgb(123, 136, 110); line-height: 1.8;}
.sample-prototype .note-box.blue{border-color: rgb(220, 232, 238); background: rgb(243, 248, 251); color: rgb(107, 131, 145);}
.sample-prototype .note-box.warning{border-color: rgb(243, 228, 202); background: rgb(255, 249, 238); color: rgb(146, 115, 76);}
.sample-prototype .note-box.error{border-color: rgb(242, 214, 209); background: rgb(255, 246, 244); color: rgb(172, 104, 94);}
.sample-prototype .note-box.success{border-color: rgb(207, 231, 216); background: rgb(241, 250, 244); color: rgb(78, 137, 98);}
.sample-prototype .check-row{display: flex; align-items: flex-start; gap: 10px; padding: 10px 0px; border-bottom: 1px solid rgb(237, 242, 237); font-size: 11px;}
.sample-prototype .check-row:last-child{border: 0px;}
.sample-prototype .check-icon{width: 18px; height: 18px; border-radius: 50%; background: rgb(239, 243, 237); color: rgb(161, 175, 154); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px;}
.sample-prototype .check-icon .icon{width: 11px; height: 11px;}
.sample-prototype .check-row.ok .check-icon{background: rgb(230, 243, 231); color: rgb(80, 145, 95);}
.sample-prototype .check-row .right{margin-left: auto; flex-shrink: 0;}
.sample-prototype .project-actions{display: flex; gap: 8px; flex-wrap: wrap;}
.sample-prototype .version-layout{display: grid; grid-template-columns: 180px minmax(0px, 1fr); gap: 22px;}
.sample-prototype .version-list{display: grid; gap: 9px; align-content: start;}
.sample-prototype .version-button{display: block; text-align: left; width: 100%; border: 1px solid var(--line); padding: 16px 14px; border-radius: 10px; background: white; color: var(--ink);}
.sample-prototype .version-button.active{border-color: rgb(144, 186, 156); background: rgb(242, 248, 241); box-shadow: rgb(116, 169, 132) 3px 0px inset;}
.sample-prototype .version-button strong{font-size: 13px;}
.sample-prototype .version-button p{font-size: 10px; color: var(--muted); margin-top: 6px;}
.sample-prototype .version-button .badge{margin-top: 8px;}
.sample-prototype .qc-checks{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; margin-top: 15px;}
.sample-prototype .qc-check{border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: rgb(250, 252, 249);}
.sample-prototype .qc-check label{font-size: 11px; font-weight: 650; display: block; margin-bottom: 6px;}
.sample-prototype .qc-check select{width: 100%; font-size: 11px; padding: 7px; border: 1px solid rgb(217, 228, 217); border-radius: 5px; background: white;}
.sample-prototype .issue{border: 1px solid rgb(236, 217, 208); border-radius: 10px; padding: 15px; margin-top: 12px; background: rgb(255, 252, 248);}
.sample-prototype .issue.resolved{border-color: rgb(217, 230, 216); background: rgb(252, 253, 251);}
.sample-prototype .issue p{font-size: 11px; color: rgb(127, 135, 124); margin-top: 7px; line-height: 1.7; white-space: pre-wrap;}
.sample-prototype .issue-photo{width: 64px; height: 64px; object-fit: cover; border-radius: 7px; cursor: pointer;}
.sample-prototype .photo-grid{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 17px;}
.sample-prototype .photo-card{border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white;}
.sample-prototype .photo-thumb{width: 100%; height: 170px; display: block; object-fit: cover; background: rgb(237, 242, 233); cursor: zoom-in; border: 0px; padding: 0px; position: relative; color: inherit;}
.sample-prototype .photo-thumb > img{height: 100%; width: 100%; object-fit: cover;}
.sample-prototype .photo-thumb > svg{width: 100%; height: 100%;}
.sample-prototype .photo-example-label{font-size: 8px; position: absolute; bottom: 8px; left: 9px; background: rgba(255, 255, 255, 0.73); border: 1px solid rgb(218, 228, 214); color: rgb(122, 136, 114); padding: 3px 5px; border-radius: 4px; letter-spacing: 0.7px;}
.sample-prototype .photo-card-body{padding: 13px 14px;}
.sample-prototype .photo-card-body h3{font-size: 12px;}
.sample-prototype .photo-card-body p{font-size: 10px; color: var(--muted); line-height: 1.7; margin-top: 5px; white-space: pre-wrap; min-height: 34px;}
.sample-prototype .photo-card-footer{display: flex; justify-content: space-between; align-items: center; margin-top: 12px;}
.sample-prototype .photo-card-footer .icon-btn{padding: 4px; min-height: 25px; min-width: 25px;}
.sample-prototype .photo-card-footer .icon{height: 13px; width: 13px;}
.sample-prototype .upload-card{min-height: 290px; border: 1.5px dashed rgb(188, 207, 188); border-radius: 12px; background: rgb(246, 250, 243); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: rgb(119, 146, 114); padding: 20px; cursor: pointer;}
.sample-prototype .upload-card .icon{height: 28px; width: 28px; margin-bottom: 12px;}
.sample-prototype .upload-card strong{font-size: 12px;}
.sample-prototype .upload-card p{font-size: 10px; line-height: 1.8; max-width: 200px; margin-top: 7px;}
.sample-prototype .upload-card:hover{background: rgb(237, 245, 232);}
.sample-prototype .size-cards{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; margin-bottom: 20px;}
.sample-prototype .size-card{border: 1px solid var(--line); border-radius: 10px; background: white; text-align: left; padding: 14px 16px;}
.sample-prototype .size-card.active{border-color: rgb(117, 168, 133); box-shadow: rgb(117, 168, 133) 0px 0px 0px 1px inset; background: rgb(246, 250, 242);}
.sample-prototype .size-card h3{font-size: 20px; margin-bottom: 8px;}
.sample-prototype .size-card p{font-size: 10px; color: var(--muted); margin-top: 9px;}
.sample-prototype .num-input{width: 73px; max-width: 100%; padding: 7px 8px; border: 1px solid rgb(217, 227, 215); border-radius: 6px; background: rgb(255, 255, 255); text-align: right; color: var(--ink); font-size: 12px;}
.sample-prototype .num-input:disabled{background: rgb(244, 247, 241); color: rgb(129, 145, 124); border-color: transparent;}
.sample-prototype .measure-table th,.sample-prototype .measure-table td{padding: 11px 16px;}
.sample-prototype .measure-table td:first-child{min-width: 155px;}
.sample-prototype .cell-good{color: rgb(76, 146, 97); font-weight: 650;}
.sample-prototype .cell-bad{color: rgb(189, 100, 85); font-weight: 650;}
.sample-prototype .checkboxes{display: flex; gap: 12px; flex-wrap: wrap;}
.sample-prototype .check-control{display: flex; gap: 8px; align-items: center; font-size: 12px;}
.sample-prototype .check-control input{accent-color: var(--brand); height: 16px; width: 16px;}
.sample-prototype .history-details{border: 1px solid var(--line); border-radius: 8px; margin-top: 14px;}
.sample-prototype .history-details summary{padding: 10px 14px; font-size: 11px; cursor: pointer; color: var(--muted);}
.sample-prototype .history-details > div{padding: 12px 14px; border-top: 1px solid var(--line); font-size: 11px;}
.sample-prototype .acc-photo{height: 47px; width: 47px; border-radius: 7px; object-fit: cover; background: rgb(238, 243, 233); display: grid; place-items: center; cursor: pointer; overflow: hidden;}
.sample-prototype .acc-photo svg{height: 38px; width: 38px;}
.sample-prototype .fields{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 17px;}
.sample-prototype .field{display: flex; flex-direction: column; gap: 6px; min-width: 0px;}
.sample-prototype .field.full{grid-column: 1 / -1;}
.sample-prototype .field > label{font-size: 11px; font-weight: 650; color: rgb(94, 114, 102);}
.sample-prototype .field input:not([type="checkbox"]):not([type="color"]),.sample-prototype .field select,.sample-prototype .field textarea{border: 1px solid rgb(214, 225, 213); border-radius: 7px; padding: 9px 10px; width: 100%; background: white; color: var(--ink); font-size: 12px; min-height: 39px;}
.sample-prototype .field textarea{resize: vertical; min-height: 80px; line-height: 1.7;}
.sample-prototype .field small{font-size: 10px; color: var(--muted); line-height: 1.6;}
.sample-prototype .field input[type="file"]{font-size: 11px !important; background: rgb(247, 250, 245) !important; padding: 10px !important;}
.sample-prototype .field input[type="color"]{width: 100%; height: 39px; border: 1px solid var(--line); padding: 4px; border-radius: 7px; background: rgb(255, 255, 255);}
.sample-prototype .field input:disabled,.sample-prototype .field textarea:disabled,.sample-prototype .field select:disabled{background: rgb(244, 247, 242); color: rgb(139, 153, 134);}
.sample-prototype .form-actions{display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 24px;}
.sample-prototype .form-error{color: rgb(178, 95, 81); font-size: 11px; margin-top: 14px; line-height: 1.6;}
.sample-prototype .color-chips{display: flex; gap: 10px; flex-wrap: wrap;}
.sample-prototype .color-chip{display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgb(255, 255, 255); border-radius: 8px; padding: 8px 10px; font-size: 11px;}
.sample-prototype .color-swatch{height: 20px; width: 20px; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.075); border-radius: 50%; flex-shrink: 0;}
.sample-prototype .pill-size{padding: 7px 12px; border: 1px solid rgb(217, 229, 214); border-radius: 7px; font-size: 11px; display: inline-block; background: rgb(247, 250, 244); font-weight: 650;}
.sample-prototype .releases{display: flex; gap: 10px; flex-wrap: wrap;}
.sample-prototype .release{border: 1px solid var(--line); border-radius: 8px; background: rgb(250, 252, 248); padding: 12px 15px; font-size: 11px;}
.sample-prototype .release strong{display: block; margin-bottom: 3px;}
.sample-prototype .large-success{background: rgb(236, 246, 233); border: 1px solid rgb(213, 233, 203); border-radius: 12px; padding: 25px; display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px;}
.sample-prototype .large-success > .icon{height: 30px; width: 30px; color: rgb(90, 145, 96);}
.sample-prototype .large-success h2{font-size: 19px; margin-bottom: 7px;}
.sample-prototype .large-success p{font-size: 12px; line-height: 1.8; color: rgb(125, 145, 118);}
.sample-prototype .product-draft{padding: 17px 20px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255, 255, 255); margin-bottom: 13px; display: flex; justify-content: space-between; align-items: center; gap: 15px;}
.sample-prototype .product-draft h3{font-size: 13px;}
.sample-prototype .product-draft p{font-size: 11px; color: var(--muted); margin-top: 4px;}
.sample-prototype .modal-backdrop{position: fixed; inset: 0px; z-index: 80; background: rgba(20, 45, 40, 0.376); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px;}
.sample-prototype .modal{width: 610px; max-width: 100%; max-height: 90vh; background: white; border-radius: 16px; box-shadow: rgba(18, 49, 38, 0.314) 0px 24px 90px; display: flex; flex-direction: column; overflow: hidden;}
.sample-prototype .modal.wide{width: 880px;}
.sample-prototype .modal-head{padding: 23px 27px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgb(236, 240, 233); flex-shrink: 0;}
.sample-prototype .modal-head h2{font-size: 21px;}
.sample-prototype .modal-head p{font-size: 11px; color: var(--muted); margin-top: 7px;}
.sample-prototype .modal-content{padding: 23px 27px 26px; overflow: auto; overscroll-behavior: contain;}
.sample-prototype .modal .form-actions{position: sticky; bottom: -26px; background: linear-gradient(rgba(255, 255, 255, 0.87), rgb(255, 255, 255) 24%); padding: 15px 0px 3px; margin-top: 17px;}
.sample-prototype .image-preview{max-height: 70vh; max-width: 100%; object-fit: contain; border-radius: 9px; display: block; margin: auto;}
.sample-prototype .modal-gallery-svg{height: 300px; width: 100%; background: rgb(238, 244, 233); border-radius: 9px;}
.sample-prototype .modal-gallery-svg svg{height: 100%; width: 100%;}
.sample-prototype .photo-input-preview{max-height: 140px; max-width: 100%; border-radius: 7px; object-fit: contain; margin-top: 6px;}
.sample-prototype .toast{position: fixed; bottom: 26px; left: calc(50% + 80px); transform: translateX(-50%); z-index: 200; background: rgb(33, 62, 50); color: rgb(231, 243, 231); border: 1px solid rgb(72, 105, 80); box-shadow: rgba(20, 51, 33, 0.145) 0px 8px 25px; border-radius: 10px; padding: 13px 19px; font-size: 12px; display: flex; align-items: center; gap: 10px; max-width: 90vw;}
.sample-prototype .toast.error{background: rgb(117, 62, 52); border-color: rgb(145, 87, 78);}
.sample-prototype .toast .icon{width: 17px; height: 17px;}
.sample-prototype .mobile-bottom{display: none;}
.sample-prototype .guide-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.sample-prototype .guide-card{padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255, 255, 255);}
.sample-prototype .guide-card h3{font-size: 14px; margin: 15px 0px 10px;}
.sample-prototype .guide-card p{font-size: 12px; color: var(--muted); line-height: 1.9;}
.sample-prototype .guide-card > .icon{color: var(--brand); height: 25px; width: 25px;}
.sample-prototype .guide-visual{height: 320px; background: rgb(245, 248, 239); border: 1px solid rgb(220, 230, 211); border-radius: 11px; position: relative; overflow: hidden;}
.sample-prototype .guide-visual svg{height: 100%; width: 100%;}
.sample-prototype .guide-step{display: flex; gap: 9px; font-size: 12px; color: var(--muted); margin-top: 13px; align-items: center;}
.sample-prototype .guide-step.active{color: var(--brand); font-weight: 650;}
.sample-prototype .guide-step span{height: 25px; width: 25px; display: grid; place-items: center; background: rgb(239, 245, 234); border-radius: 50%; font-size: 11px; flex-shrink: 0;}
.sample-prototype .guide-visual.animate .tape-line{animation: 3s ease-in-out 0s infinite normal none running draw-tape; stroke-dasharray: 250; stroke-dashoffset: 250;}
.sample-prototype .guide-visual .tape-dot{animation: 1.5s ease 0s infinite normal none running pulse;}
.sample-prototype .guide-visual:not(.animate) .tape-dot{animation: auto ease 0s 1 normal none running none;}
@keyframes draw-tape { 
  0%, 15% { stroke-dashoffset: 250; }
  70%, 100% { stroke-dashoffset: 0; }
}
@keyframes pulse { 
  50% { opacity: 0.35; }
}
.sample-prototype .hide{display: none !important;}
.sample-prototype #print-area{display: none;}
.sample-prototype .modal-locked{color: rgb(134, 151, 128); font-size: 11px; margin-top: 8px;}
.sample-prototype input[type="number"]{appearance: textfield;}
.sample-prototype input::-webkit-outer-spin-button,.sample-prototype input::-webkit-inner-spin-button{appearance: none; margin: 0px;}
.sample-prototype .statusline{display: flex; align-items: center; gap: 8px; margin: 14px 0px; font-size: 11px; color: var(--muted);}
.sample-prototype .master-list{border: 1px solid var(--line); border-radius: 9px; overflow: hidden;}
.sample-prototype .master-row{display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; background: rgb(255, 255, 255); border-bottom: 1px solid var(--line);}
.sample-prototype .master-row:last-child{border: 0px;}
.sample-prototype .master-row strong{font-size: 12px;}
.sample-prototype .master-row p{font-size: 10px; color: var(--muted); margin-top: 3px;}
.sample-prototype .footer-note{font-size: 10px; color: rgb(140, 154, 134); margin-top: 23px; text-align: center;}
.sample-prototype .lock-banner{padding: 11px 16px; background: rgb(237, 246, 234); border: 1px solid rgb(212, 231, 206); border-radius: 9px; display: flex; gap: 10px; align-items: center; font-size: 11px; color: rgb(97, 131, 88); margin-bottom: 20px;}
.sample-prototype .table-row-actions{display: flex; gap: 5px;}
.sample-prototype .photo-bulk-item{display: grid; grid-template-columns: 74px minmax(0px, 1fr); gap: 13px; padding: 14px 0px; border-bottom: 1px solid var(--line);}
.sample-prototype .photo-bulk-item img{height: 74px; width: 74px; object-fit: cover; border-radius: 8px;}
.sample-prototype .photo-bulk-item .field{margin-bottom: 7px;}
.sample-prototype .reading-width{max-width: 850px;}
.sample-prototype .banner-pending{border: 1px solid rgb(237, 226, 196); background: rgb(255, 251, 240); border-radius: 9px; padding: 15px 17px; margin-bottom: 18px; font-size: 12px; color: rgb(163, 135, 83); display: flex; gap: 12px; align-items: center;}
.sample-prototype .revision-note{padding: 10px 14px; background: rgb(247, 249, 245); border-left: 3px solid rgb(197, 216, 184); font-size: 11px; color: rgb(125, 139, 112); margin-top: 12px; line-height: 1.7;}
.sample-prototype .small-table{border-collapse: collapse; width: 100%; font-size: 11px;}
.sample-prototype .small-table td,.sample-prototype .small-table th{padding: 8px; border-bottom: 1px solid var(--line); text-align: left;}
.sample-prototype .brand-rule{height: 3px; background: linear-gradient(90deg, rgb(181, 205, 159), rgb(116, 167, 141)); width: 37px; margin-bottom: 16px;}
.sample-prototype .sample-table th:first-child,.sample-prototype .sample-table td:first-child{padding-left: 23px;}
.sample-prototype .soft-border{border-top: 1px solid var(--line); padding-top: 17px; margin-top: 20px;}
@media (min-width: 1500px){.sample-prototype .main{padding-left: 45px; padding-right: 45px;}
.sample-prototype .dashboard-grid{grid-template-columns: minmax(0px, 1fr) 300px;}
.sample-prototype .photo-thumb{height: 205px;}}
@media (max-width: 1200px){.sample-prototype .sidebar{width: 198px; padding-left: 15px; padding-right: 15px;}
.sample-prototype .page{margin-left: 198px;}
.sample-prototype .main{padding: 25px;}
.sample-prototype .topbar{padding: 0px 25px;}
.sample-prototype .dashboard-grid{grid-template-columns: minmax(0px, 1fr);}
.sample-prototype .dashboard-aside{display: grid; grid-template-columns: 1fr 1fr; gap: 18px;}
.sample-prototype .dashboard-aside .stack{display: contents;}
.sample-prototype .dashboard-aside > .card:last-child{display: none;}
.sample-prototype .detail-grid{grid-template-columns: minmax(0px, 1fr) 250px; gap: 17px;}
.sample-prototype .tabbar{gap: 17px;}
.sample-prototype .detail-metric{padding: 13px 17px;}
.sample-prototype .data-table td{padding: 15px;}
.sample-prototype .toast{left: calc(50% + 99px);}}
@media (max-width: 980px){.sample-prototype .detail-grid{grid-template-columns: 1fr;}
.sample-prototype .detail-grid > aside{display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.sample-prototype .detail-grid > aside > .card,.sample-prototype .detail-grid > aside > .attention-card{margin: 0px;}
.sample-prototype .detail-heading{flex-wrap: wrap;}
.sample-prototype .detail-heading > .project-actions{margin-left: 80px;}
.sample-prototype .photo-grid{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.sample-prototype .table-tools{flex-wrap: wrap;}
.sample-prototype .searchbox{width: 100%; max-width: 290px;}
.sample-prototype .metric{padding: 16px;}
.sample-prototype .metric-foot{font-size: 9px;}
.sample-prototype .size-cards{grid-template-columns: repeat(4, minmax(0px, 1fr));}
.sample-prototype .size-card{padding: 12px;}}
@media (max-width: 760px){.sample-prototype .sidebar{display: none;}
.sample-prototype .sidebar.mobile-open{display: flex; width: 242px; box-shadow: rgba(20, 42, 37, 0.376) 0px 0px 0px 100vw;}
.sample-prototype .page{margin-left: 0px; padding-bottom: 72px;}
.sample-prototype .topbar{height: 60px; padding: 0px 19px; position: sticky; top: 0px; z-index: 25;}
.sample-prototype .main{padding: 20px 17px 25px;}
.sample-prototype .crumb{font-size: 10px; gap: 7px;}
.sample-prototype .mobile-menu{display: inline-flex;}
.sample-prototype .top-pill{display: none;}
.sample-prototype .header-actions{gap: 7px;}
.sample-prototype .header-actions .btn{font-size: 0px; padding: 7px;}
.sample-prototype .header-actions .btn .icon{width: 16px; height: 16px;}
.sample-prototype .avatar{width: 27px; height: 27px;}
.sample-prototype .prototype-note{font-size: 9px; line-height: 1.6; padding: 8px 10px; margin-bottom: 24px; align-items: flex-start;}
.sample-prototype .prototype-note > .icon{margin-top: 1px; flex-shrink: 0;}
.sample-prototype .page-title{align-items: flex-start; flex-wrap: wrap; gap: 15px; margin: 2px 0px 23px;}
.sample-prototype .page-title h1{font-size: 25px; letter-spacing: -0.8px;}
.sample-prototype .page-title p{font-size: 11px; max-width: 290px;}
.sample-prototype .date-chip{display: none;}
.sample-prototype .grid-metrics{grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px;}
.sample-prototype .metric{padding: 13px 15px;}
.sample-prototype .metric-top{font-size: 10px; margin-bottom: 8px;}
.sample-prototype .metric-num{font-size: 26px;}
.sample-prototype .metric-foot{font-size: 9px;}
.sample-prototype .dashboard-grid{gap: 18px;}
.sample-prototype .card-head{padding: 19px 17px 15px;}
.sample-prototype .card-body{padding: 18px 17px;}
.sample-prototype .card-head h2{font-size: 18px;}
.sample-prototype .card-head h3{font-size: 14px;}
.sample-prototype .table-tools{padding: 0px 17px 15px; gap: 12px;}
.sample-prototype .segmented{width: 100%; gap: 2px;}
.sample-prototype .segment{padding: 7px 8px; font-size: 9px; flex: 1 1 0%; text-align: center;}
.sample-prototype .segment .num{margin-left: 3px;}
.sample-prototype .searchbox{max-width: none;}
.sample-prototype .sample-table thead{display: none;}
.sample-prototype .sample-table tbody{display: block;}
.sample-prototype .sample-table tr{display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; padding: 15px 17px; border-top: 1px solid rgb(233, 239, 231); position: relative;}
.sample-prototype .sample-table tr:last-child{border-bottom: 0px;}
.sample-prototype .sample-table td{display: block; border: 0px; max-width: 100%; padding: 0px !important;}
.sample-prototype .sample-table td:nth-child(1){grid-area: 1 / 1 / 3;}
.sample-prototype .sample-table td:nth-child(2){display: none;}
.sample-prototype .sample-table td:nth-child(3){grid-area: 1 / 2; text-align: right;}
.sample-prototype .sample-table td:nth-child(4){grid-area: 2 / 2; justify-self: end; width: 76px;}
.sample-prototype .sample-table td:nth-child(5){display: none;}
.sample-prototype .sample-table td:nth-child(6){grid-area: 3 / 1 / auto / 3; text-align: right; font-size: 9px; color: rgb(152, 164, 143);}
.sample-prototype .sample-table td:nth-child(7){display: none;}
.sample-prototype .sample-table .product-name{font-size: 11px; max-width: 155px;}
.sample-prototype .sample-table .product-sub{font-size: 9px;}
.sample-prototype .garment-thumb{width: 36px; height: 44px;}
.sample-prototype .garment-thumb svg{width: 31px; height: 38px;}
.sample-prototype .sample-table .badge{font-size: 8px; padding: 4px 6px;}
.sample-prototype .list-footer{padding: 11px 17px; font-size: 9px; gap: 10px;}
.sample-prototype .dashboard-aside{display: grid; grid-template-columns: 1fr;}
.sample-prototype .attention-card{padding: 20px;}
.sample-prototype .dashboard-aside > .card:last-child{display: block;}
.sample-prototype .mobile-bottom{display: flex; align-items: center; justify-content: space-around; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 40; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); height: 66px; padding-bottom: env(safe-area-inset-bottom,0px); backdrop-filter: blur(10px);}
.sample-prototype .bottom-link{border: 0px; background: transparent; color: rgb(146, 161, 139); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 16px; font-size: 9px;}
.sample-prototype .bottom-link.active{color: var(--brand);}
.sample-prototype .bottom-link .icon{width: 19px; height: 19px;}
.sample-prototype .detail-back{margin-bottom: 18px; font-size: 10px;}
.sample-prototype .detail-heading{gap: 15px;}
.sample-prototype .detail-heading h1{font-size: 23px; line-height: 1.2; margin-top: 5px;}
.sample-prototype .detail-thumb{width: 49px; height: 59px; border-radius: 9px;}
.sample-prototype .detail-thumb svg{width: 45px; height: 52px;}
.sample-prototype .detail-heading > .flex{gap: 12px; align-items: flex-start; min-width: 0px;}
.sample-prototype .detail-heading > .project-actions{margin-left: 0px; width: 100%;}
.sample-prototype .detail-sub{gap: 8px; font-size: 9px; line-height: 1.7; margin-top: 8px;}
.sample-prototype .detail-sub .icon{height: 11px; width: 11px;}
.sample-prototype .detail-metrics{margin: 19px 0px 16px; display: grid; grid-template-columns: 1fr 1fr;}
.sample-prototype .detail-metric{padding: 12px 14px;}
.sample-prototype .detail-metric:nth-child(2){border-right: 0px;}
.sample-prototype .detail-metric:nth-child(-n+2){border-bottom: 1px solid var(--line);}
.sample-prototype .detail-metric .label{font-size: 9px;}
.sample-prototype .detail-metric strong{font-size: 17px;}
.sample-prototype .detail-metric strong .badge{font-size: 8px; margin-left: 6px;}
.sample-prototype .workflow{padding: 13px 14px 10px; margin-bottom: 18px;}
.sample-prototype .workflow-title{font-size: 9px;}
.sample-prototype .step{min-width: 84px;}
.sample-prototype .step-label{font-size: 8px; max-width: 72px;}
.sample-prototype .step-dot{width: 21px; height: 21px; font-size: 8px;}
.sample-prototype .step::before{top: 10px; left: 24px;}
.sample-prototype .tabbar{gap: 19px; margin-bottom: 18px;}
.sample-prototype .tab{font-size: 10px; padding-bottom: 11px;}
.sample-prototype .tab .icon{width: 13px; height: 13px;}
.sample-prototype .detail-grid{gap: 18px;}
.sample-prototype .detail-grid > aside{grid-template-columns: 1fr;}
.sample-prototype .info-grid{gap: 18px;}
.sample-prototype .info-item .label{font-size: 9px;}
.sample-prototype .info-item strong{font-size: 11px;}
.sample-prototype .version-layout{grid-template-columns: 1fr; gap: 17px;}
.sample-prototype .version-list{display: flex; overflow: auto; gap: 9px; padding-bottom: 3px;}
.sample-prototype .version-button{min-width: 128px; padding: 12px; max-width: 160px;}
.sample-prototype .version-button strong{font-size: 12px;}
.sample-prototype .version-button p{font-size: 9px;}
.sample-prototype .version-button .badge{font-size: 8px;}
.sample-prototype .qc-checks{grid-template-columns: 1fr 1fr; gap: 9px;}
.sample-prototype .qc-check{padding: 10px;}
.sample-prototype .qc-check label{font-size: 10px;}
.sample-prototype .qc-check select{font-size: 10px;}
.sample-prototype .photo-grid{gap: 11px;}
.sample-prototype .photo-thumb{height: 139px;}
.sample-prototype .photo-card-body{padding: 12px 11px;}
.sample-prototype .photo-card-body h3{font-size: 11px;}
.sample-prototype .photo-card-body p{font-size: 9px; min-height: 45px;}
.sample-prototype .photo-card-footer{margin-top: 9px; gap: 4px;}
.sample-prototype .photo-card-footer .mono{font-size: 9px;}
.sample-prototype .photo-card-footer .flex{gap: 3px;}
.sample-prototype .photo-card-footer .icon-btn{min-width: 23px; min-height: 23px; padding: 3px;}
.sample-prototype .upload-card{min-height: 261px; padding: 12px;}
.sample-prototype .upload-card strong{font-size: 11px;}
.sample-prototype .upload-card p{font-size: 9px;}
.sample-prototype .size-cards{grid-template-columns: 1fr 1fr; gap: 9px;}
.sample-prototype .size-card{padding: 12px 14px;}
.sample-prototype .size-card h3{font-size: 18px;}
.sample-prototype .size-card p{font-size: 9px;}
.sample-prototype .measure-table th{font-size: 8px;}
.sample-prototype .measure-table th,.sample-prototype .measure-table td{padding: 10px 11px;}
.sample-prototype .measure-table td{font-size: 11px;}
.sample-prototype .measure-table td:first-child{min-width: 126px;}
.sample-prototype .num-input{width: 61px; font-size: 11px; padding: 7px 6px;}
.sample-prototype .fields{grid-template-columns: 1fr; gap: 14px;}
.sample-prototype .field.full{grid-column: 1;}
.sample-prototype .field > label{font-size: 11px;}
.sample-prototype .field input:not([type="checkbox"]):not([type="color"]),.sample-prototype .field select,.sample-prototype .field textarea{font-size: 16px; padding: 9px 10px;}
.sample-prototype .field small{font-size: 10px;}
.sample-prototype .guide-grid{grid-template-columns: 1fr;}
.sample-prototype .guide-card{padding: 21px;}
.sample-prototype .toast{left: 50%; bottom: 80px; font-size: 11px; width: max-content; max-width: calc(-28px + 100vw); padding: 12px 15px;}
.sample-prototype .modal-backdrop{padding: 14px 12px; align-items: center;}
.sample-prototype .modal{max-height: 90dvh; border-radius: 13px;}
.sample-prototype .modal-head{padding: 19px 19px 15px;}
.sample-prototype .modal-head h2{font-size: 19px;}
.sample-prototype .modal-head p{font-size: 10px;}
.sample-prototype .modal-content{padding: 19px;}
.sample-prototype .modal .form-actions{bottom: -19px; padding-bottom: 1px;}
.sample-prototype .modal-gallery-svg{height: 250px;}
.sample-prototype .guide-visual{height: 280px;}
.sample-prototype .product-draft{flex-wrap: wrap; padding: 16px;}
.sample-prototype .product-draft > .flex{min-width: 0px;}
.sample-prototype .large-success{padding: 20px; gap: 13px;}
.sample-prototype .large-success h2{font-size: 17px;}
.sample-prototype .large-success p{font-size: 11px;}
.sample-prototype .btn{padding: 8px 10px; font-size: 11px; min-height: 35px;}
.sample-prototype .btn.small{font-size: 10px; min-height: 29px;}
.sample-prototype .section-intro{font-size: 11px;}
.sample-prototype .lock-banner{font-size: 10px;}
.sample-prototype .photo-bulk-item{grid-template-columns: 54px minmax(0px, 1fr); gap: 10px;}
.sample-prototype .photo-bulk-item img{width: 54px; height: 54px;}
.sample-prototype .photo-bulk-item .field input,.sample-prototype .photo-bulk-item .field textarea{font-size: 14px !important;}
.sample-prototype .master-row{padding: 12px;}
.sample-prototype .master-row strong{font-size: 11px;}
.sample-prototype .master-row p{font-size: 9px;}
.sample-prototype .footer-note{font-size: 9px; line-height: 1.7;}
.sample-prototype .date-inline{font-size: 9px;}
.sample-prototype .table-wrap{max-width: 100%;}}
@media (prefers-reduced-motion: reduce){.sample-prototype *,.sample-prototype ::before,.sample-prototype ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important;}}
@media print{@page { size: a4; margin: 16mm; }
.sample-prototype{background: white; font-size: 10pt; color: rgb(36, 54, 44);}
.sample-prototype .sidebar,.sample-prototype .page,.sample-prototype .mobile-bottom,.sample-prototype .modal-backdrop,.sample-prototype .toast{display: none !important;}
.sample-prototype #print-area{display: block !important;}
.sample-prototype #print-area h1{font-size: 23pt; letter-spacing: -0.5px;}
.sample-prototype #print-area h2{font-size: 13pt; margin: 20px 0px 10px; border-bottom: 1px solid rgb(206, 217, 200); padding-bottom: 5px; break-after: avoid;}
.sample-prototype #print-area h3{font-size: 10pt; margin-bottom: 4px;}
.sample-prototype #print-area p{font-size: 9pt; color: rgb(96, 113, 89); margin: 4px 0px 8px; line-height: 1.6;}
.sample-prototype #print-area table{border-collapse: collapse; width: 100%; font-size: 9pt; margin-top: 10px;}
.sample-prototype #print-area th,.sample-prototype #print-area td{border: 1px solid rgb(212, 223, 204); padding: 6px; text-align: left;}
.sample-prototype #print-area th{background: rgb(241, 245, 236);}
.sample-prototype #print-area thead{display: table-header-group;}
.sample-prototype #print-area tr{break-inside: avoid;}
.sample-prototype #print-area .print-header{display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid rgb(106, 149, 97); padding-bottom: 15px; margin-bottom: 15px;}
.sample-prototype #print-area .print-tag{font-size: 8pt; letter-spacing: 1px; color: rgb(126, 152, 115); text-transform: uppercase;}
.sample-prototype #print-area .print-photos{display: grid; grid-template-columns: 1fr 1fr; gap: 13px;}
.sample-prototype #print-area .print-photo{break-inside: avoid; border: 1px solid rgb(213, 223, 206); padding: 10px;}
.sample-prototype #print-area .print-photo img,.sample-prototype #print-area .print-photo svg{height: 180px; width: 100%; object-fit: contain;}
.sample-prototype #print-area .print-photo p{font-size: 8pt;}
.sample-prototype #print-area .print-note{padding: 10px; background: rgb(244, 247, 238); font-size: 8pt; border: 1px solid rgb(220, 228, 211); margin-bottom: 12px;}
.sample-prototype #print-area .print-footer{font-size: 8pt; color: rgb(136, 150, 126); margin-top: 20px; border-top: 1px solid rgb(220, 228, 211); padding-top: 8px;}
.sample-prototype #print-area .print-small-photo{width: 40px; height: 40px; object-fit: contain;}
.sample-prototype #print-area .print-small-photo svg{width: 40px; height: 40px;}
.sample-prototype #print-area section{break-inside: auto;}
.sample-prototype #print-area .no-break{break-inside: avoid;}}
.sample-prototype{width:100%;min-width:0}.sample-prototype .detail-back{margin-bottom:16px}.sample-prototype .num-input{max-width:100%}.sample-prototype .field input,.sample-prototype .field select,.sample-prototype .field textarea{width:100%}.sample-prototype .proto-save-state{position:sticky;top:0;z-index:3;background:var(--paper);padding:8px;color:var(--brand)}
@media(max-width:600px){.sample-prototype .project-actions{gap:8px;flex-wrap:wrap}.sample-prototype .project-actions .btn{white-space:normal;min-height:42px}.sample-prototype .detail-metrics{overflow:hidden}}