/*Base layout*/
body{font-family:'Arial', sans-serif;background:#0b1220;color:#ddd;padding:18px;}

.preview-area{padding:10px;}

.controls{width:320px;background:#0f1720;padding:16px;border-radius:8px;border:1px solid #111;}

.controls h3{margin-top:0;color:#fff;}
.controls label{display:block;margin:8px 0;color:#bbb;font-size:14px;}
.controls input[type=text], .controls textarea{width:100%;padding:8px;border-radius:4px;border:1px solid #333;background:#081018;color:#fff;}
.controls input[type=color]{height:36px;width:60px;padding:0;border:0;background:none;}
.controls button{margin-top:10px;padding:10px 14px;border-radius:6px;background:#f4b740;border:0;cursor:pointer;}

/*Photocard container*/
.photocard{width:560px;background:#e6f7fb;border-radius:6px;padding:12px 18px 16px 18px;color:#000;box-shadow:0 6px 0 rgba(0,0,0,0.15);overflow:hidden;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;}

/*Logo row (top of card)*/
.logo-row{display:flex;justify-content:flex-end;align-items:center;width:100%;padding:2px 8px;box-sizing:border-box;}

#cardLogo{max-width:120px;max-height:40px;width:auto;height:auto;object-fit:contain;display:block;}

/*Photo frame*/
.photo-frame{width:100%;max-width:520px;height:300px;background:#e9e9ec;border-radius:12px;margin:8px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 0 8px #fff;}

.photo-frame img{width:100%;height:100%;object-fit:contain;border-radius:8px;display:block;}

/*Headline*/
.headline{font-size:26px;font-weight:700;text-align:center;padding:10px;margin:6px 0;line-height:1.05;word-break:break-word;}

/*Red button*/
.action-btn{display:inline-block;background:#d81f3f;color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;margin-top:6px;}

/*Meta row - below button*/
.meta-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 12px 0 12px;box-sizing:border-box;color:#123;}
.meta-row .date{font-size:14px;}
.meta-row .site{font-size:16px;}

/*Banner at bottom inside card*/
.banner-row{width:100%;padding:10px 12px 0 12px;box-sizing:border-box;}

.banner-row img{width:100%;height:auto;max-height:120px;object-fit:contain;display:block;border-radius:6px;}

/*helper - ensure no extra margins from other libs*/
.photocard, .photocard *{-webkit-font-smoothing:antialiased;}

/*responsiveness small screens*/
@media (max-width:640px){
.photocard{width:95%;}
.controls{width:100%;margin-top:12px;}
.container{flex-direction:column;align-items:center;}
}