.arn-player{ --navy:#14284B; --navy-soft:#14284Bcc; --orange:#F4821F; --orange-soft:#F4821F33; --track:#E4E7EC; font-family:'Barlow',sans-serif; }
.arn-player.bar{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #E7E9EE; border-radius:14px; padding:14px 18px; margin:16px 0; }
.arn-player.bar .arn-playbtn{ width:44px; height:44px; border-radius:50%; border:2px solid var(--navy); background:transparent; color:var(--navy); flex:0 0 auto; }
.arn-player.bar .arn-body{ flex:1 1 auto; min-width:0; }
.arn-player.bar .arn-title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.arn-player.bar .arn-title{ font-weight:600; font-size:16px; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arn-player.bar .arn-brand{ font-size:12px; color:var(--navy-soft); flex:0 0 auto; }
.arn-player.card{ background:#fff; border:1px solid #E7E9EE; border-radius:18px; padding:22px 22px 18px; box-shadow:0 8px 24px rgba(20,40,75,.08); margin:16px 0; }
.arn-player.card .arn-title{ font-weight:700; font-size:20px; color:var(--navy); margin:0 0 2px; }
.arn-player.card .arn-subtitle{ font-size:14px; color:var(--navy-soft); margin:0 0 18px; }
.arn-player.card .arn-playbtn{ width:56px; height:56px; border-radius:50%; background:var(--orange); border:none; color:#fff; }
.arn-player .arn-controls-row{ display:flex; align-items:center; gap:10px; }
.arn-player.card .arn-controls-row{ justify-content:center; gap:22px; margin-bottom:14px; }
.arn-player .arn-icon-btn{ border:none; background:transparent; color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.arn-player .arn-icon-btn svg{ width:20px; height:20px; }
.arn-player .arn-playbtn{ display:flex; align-items:center; justify-content:center; cursor:pointer; }
.arn-player .arn-playbtn svg{ width:18px; height:18px; }
.arn-player .arn-speed{ font-weight:600; font-size:13px; background:var(--orange-soft); color:var(--navy); border:none; border-radius:999px; padding:5px 10px; cursor:pointer; }
.arn-player .arn-scrub-row{ display:flex; align-items:center; gap:10px; }
.arn-player .arn-time{ font-size:12px; color:var(--navy-soft); width:38px; }
.arn-player .arn-time.end{ text-align:right; }
.arn-player .arn-scrub{ flex:1 1 auto; height:4px; border-radius:999px; background:var(--track); position:relative; cursor:pointer; }
.arn-player .arn-scrub-fill{ position:absolute; left:0; top:0; height:100%; background:var(--navy); border-radius:999px; }
.arn-player .arn-scrub-thumb{ position:absolute; top:50%; width:12px; height:12px; background:var(--navy); border-radius:50%; transform:translate(-50%,-50%); }
.arn-player .arn-watermark{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--navy-soft); opacity:.8; margin-top:10px; }
.arn-player .arn-watermark img{ height:14px; width:auto; }