.depth-ribbon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex-shrink:0;margin:2px 0 7px}
.depth-ribbon button{border:1px solid #35515c;background:#11242b;color:#c9dfe1;border-radius:7px;padding:6px 8px;min-width:0;text-align:left;font:inherit;font-size:11px;cursor:pointer}
.depth-ribbon button span{display:flex;gap:6px;justify-content:space-between;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.depth-ribbon b{color:#eed08c;font-weight:600;flex-shrink:0}
.depth-ribbon progress{display:block;width:100%;height:3px;margin-top:5px;border:0;border-radius:2px;accent-color:#69b9ac;background:#233b44}.depth-ribbon progress::-webkit-progress-bar{background:#233b44;border-radius:2px}.depth-ribbon progress::-webkit-progress-value{background:#69b9ac;border-radius:2px}
.depth-chapter{display:flex;gap:7px;align-items:center;flex-shrink:0;min-width:0;font-size:11px;color:#a4c7cb;padding:4px 0}.depth-chapter .icon{width:15px;height:15px}.depth-chapter span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.depth-chapter strong{font-weight:500;color:#e2c78b;margin-left:auto;flex-shrink:0}
.save-slots{display:grid;gap:8px;margin:14px 0}.save-slot{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px;border:1px solid #35515c;border-radius:8px;background:#10222a}.save-slot span{display:block;color:#acd0d4;font-size:12px}.save-slot strong{display:block;color:#f0d49b}.save-slot[aria-current=true]{border-color:#c7a765}.save-slot-buttons{display:flex;gap:6px;flex-wrap:wrap}.cloud-panel{padding:12px;border:1px solid #35515c;border-radius:8px;background:#10222a}.cloud-panel p{margin:6px 0}.cloud-panel a{color:#f0d49b}.cloud-record{padding:10px 0;border-bottom:1px solid #35515c}.cloud-record:last-child{border-bottom:0}.cloud-state{font-size:12px;color:#9edbc7}.cloud-error{color:#ffb2a3}
@media(max-width:600px){.depth-ribbon{gap:4px}.depth-ribbon button{font-size:10px;padding:4px 5px}.depth-chapter{font-size:10px}.save-slot{grid-template-columns:1fr}.save-slot-buttons .btn{flex:1}}
@media(max-height:700px){.depth-ribbon{grid-template-columns:1fr;margin:0}.depth-ribbon button{padding:3px 7px}.depth-ribbon button:not(:first-child){display:none}.depth-ribbon progress{height:2px;margin-top:2px}.depth-chapter{padding:2px 0}}