body{font-family:Arial,Helvetica,sans-serif;background:#f0f3f5;margin:0;color:#111}.wrap{background:#fff;margin:24px auto;padding:24px;max-width:1200px;border-radius:8px}.wrap.wide{max-width:1800px}h1{margin-top:0}table{border-collapse:collapse;width:100%;background:#fff}th,td{border:1px solid #ddd;padding:8px;vertical-align:top}th{background:#eef3f7}.btn{display:inline-block;background:#0073b7;color:#fff;text-decoration:none;border:0;border-radius:4px;padding:8px 12px;cursor:pointer;font-size:14px}.btn.small{padding:6px 10px;font-size:13px}.btn.secondary{background:#667}.topbar{margin:12px 0}.notice,.hint{background:#dff5eb;padding:12px;border-radius:5px;margin:12px 0}.alerts{color:#c24600;font-weight:bold}.tabs{margin:16px 0;border-bottom:2px solid #ddd}.tabs a{display:inline-block;padding:10px 16px;text-decoration:none;background:#e9eef3;color:#111;border-radius:6px 6px 0 0;margin-right:4px}.tabs a.active{background:#0073b7;color:#fff}.modalbg{display:none;position:fixed;z-index:10;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.45)}.modal{background:#fff;margin:6% auto;padding:20px;border-radius:8px;width:720px;max-width:90%}.modal textarea{width:100%;height:260px;font-size:16px}.modalActions{text-align:right;margin-top:12px}.thumb{max-width:180px;max-height:110px;border:1px solid #ccc;background:#fafafa}.thumbcell{width:200px;text-align:center}.svgbox{border:1px solid #ccc;background:#fafafa;padding:40px;text-align:center}.inlineform{display:inline-block;margin-left:8px}.inlineform input[type=file]{max-width:220px}.clickable{cursor:pointer}.clickable:hover{outline:3px solid #0073b7}.imageModal{background:#fff;margin:3% auto;padding:16px;border-radius:8px;width:90%;max-width:1200px;max-height:90%;overflow:auto}.imageModalHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.imageModalBody{text-align:center;background:#f7f7f7;border:1px solid #ddd;padding:16px}.imageModalBody img{max-width:100%;max-height:75vh}.audioPlayer{width:260px}.transcript{width:360px;height:90px}.textview{white-space:normal;line-height:1.35}
.transcriptView{max-width:520px;line-height:1.35;background:#fafafa}.audioPlayer{width:260px}.inlineform{margin-top:6px}


.cssBlock{
margin-bottom:24px;
border:1px solid #ccc;
background:#fff;
border-radius:6px;
overflow:hidden
}

.cssHeader{
display:flex;
justify-content:space-between;
padding:10px 14px;
background:#eef3f7;
border-bottom:1px solid #ccc;
font-size:14px
}

.cssEditor{
width:100%;
height:420px;
border:0;
padding:14px;
font-family:Consolas, monospace;
font-size:14px;
line-height:1.5;
box-sizing:border-box;
resize:vertical;
background:#fafafa
}


.screenPanel{
background:#fff;
border:1px solid #ddd;
border-radius:8px;
padding:20px;
max-width:900px
}

.screenPanel h2{
margin-top:0
}

.screenNotes{
margin-top:18px;
background:#f8fafc;
border:1px solid #e0e6ed;
border-radius:6px;
padding:16px
}

.screenNotes li{
margin:6px 0
}