:root{
  --page-bg:#E5E5E5; --content-bg:#FFFFFF; --navy:#003399; --header-text:#FFFFFF;
  --nav2-bg:#6699CC; --blue-bar:#6699CC; --label-blue:#B1D0F0; --label-text:#336699;
  --data-blue:#D5E8FB; --extnet-border:#000000; --peach-bar:#FFCC99; --orange:#FF6600;
  --comment-th:#FF9933; --comment-td:#F9D6B4; --link:#003399; --link-hover:#CC0000;
  --accent-red:#CC0000; --meta:#666666; --btn-face:#E0FFFF; --btn-border:#BABABA;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--page-bg);font-family:Verdana,Tahoma,Arial,Helvetica,sans-serif;
  font-size:11px;line-height:1.3;color:#000;}
.page{width:100%;background:var(--content-bg);}
a{color:var(--link);font-weight:bold;text-decoration:none;}
a:visited{color:var(--link);}
a:hover{color:var(--link-hover);text-decoration:underline;}

/* ---------- HEADER ---------- */
.hdr{background:var(--navy);color:#fff;}
.hdr a{color:#fff;font-weight:normal;}
.hdr a:hover{color:#fff;text-decoration:underline;}
.strip1{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 10px;}
.brand{display:flex;align-items:center;gap:7px;text-decoration:none;}
.brand:hover{text-decoration:none;}
.brand-ic{width:30px;height:30px;flex:0 0 auto;display:block;}
.brand-wm{font-family:'Varela Round',Arial,sans-serif;font-size:22px;color:#fff;line-height:1;
  -webkit-text-stroke:0.7px #fff;letter-spacing:-.3px;}
.brand-wm .tm{font-size:11px;vertical-align:baseline;-webkit-text-stroke:0;margin-left:1px;}
.brandwrap{display:flex;align-items:center;gap:8px;font-size:11px;}
.brandwrap .sep{color:#9fb6e6;}
.searchbox{display:flex;align-items:center;gap:6px;font-size:11px;}
.searchbox label{display:flex;align-items:center;gap:3px;}
.searchbox input[type=text]{width:170px;height:18px;border:1px solid #7a90c0;}
.searchbox .go{background:var(--btn-face);border:1px solid var(--btn-border);font-size:10px;
  padding:2px 8px;font-family:inherit;cursor:pointer;color:#000;}
.helps{font-size:11px;}
.strip2{background:var(--nav2-bg);height:26px;display:flex;align-items:center;justify-content:center;}
.strip2 ul{list-style:none;margin:0;padding:0;display:flex;}
.strip2 li{font-size:11px;}
.strip2 li::after{content:"|";color:#000;margin:0 7px;}
.strip2 li:last-child::after{content:"";}
.strip2 a:hover{color:var(--navy);text-decoration:none;}

/* ---------- COLUMNS ---------- */
.cols{display:flex;gap:20px;padding:0 18px 30px;align-items:flex-start;}
.left{flex:2 1 0;min-width:300px;max-width:520px;} .right{flex:3 1 0;min-width:0;}

/* ---------- LEFT ---------- */
h1.name{font-size:16px;color:var(--navy);margin:15px 0 6px;}
.photoblock{display:grid;grid-template-columns:170px 1fr;column-gap:15px;}
.ppic{width:170px;height:176px;border:1px solid #888;display:block;background:#9aa5b1;object-fit:cover;}
.viewpics{font-size:11px;margin-top:3px;}
.stats{font-size:11px;}
.tagline{color:#CC6600;font-style:italic;font-weight:bold;margin:0 0 22px;}
.stats .line{display:block;}
.lastlogin{color:var(--meta);margin-top:14px;}

.module{margin-top:14px;}
.bluebox{border:2px solid var(--blue-bar);}
.bar{background:var(--blue-bar);color:#fff;font-weight:bold;font-size:12px;height:18px;
  line-height:18px;padding-left:10px;display:flex;align-items:center;gap:5px;}
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px 6px;padding:8px 8px 9px;}
.crow{display:flex;align-items:center;gap:5px;font-size:11px;}
.cico{width:16px;height:16px;flex:0 0 16px;border:1px solid #c9c9c9;background:#eef3fb;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#36c;}

.urlbox{border:1px solid var(--blue-bar);padding:3px 6px;margin-top:10px;}
.urlbox b{font-size:11px;color:var(--navy);} .urlbox span{font-size:11px;}

.player{margin-top:12px;background:#333;border-radius:5px;padding:7px 9px;
  display:flex;align-items:center;gap:9px;color:#fff;}
.play{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #2ecc40;}
.play.paused{border-width:8px 0 8px 13px;}
.playbox{width:30px;height:30px;background:#555;border-radius:3px;display:flex;
  align-items:center;justify-content:center;flex:0 0 30px;cursor:pointer;}
.song{flex:1;font-size:11px;line-height:1.25;}
.song .t{color:#fff;} .song .a{color:#cfe0ff;text-transform:uppercase;font-weight:bold;}
.player .ctl{font-size:10px;color:#bcd0ff;text-align:right;cursor:pointer;}

table.skin{border:2px solid var(--blue-bar);border-collapse:separate;border-spacing:3px;
  width:100%;margin-top:14px;}
table.skin caption{background:var(--blue-bar);color:#fff;font-weight:bold;font-size:12px;
  text-align:left;padding:3px 0 3px 12px;}
table.skin th{background:var(--label-blue);color:var(--label-text);font-weight:bold;
  font-size:11px;text-align:left;vertical-align:top;padding:4px;width:90px;}
table.skin td{background:var(--data-blue);font-size:11px;vertical-align:top;padding:4px;}

/* ---------- RIGHT ---------- */
.extnet{border:2px solid var(--extnet-border);height:74px;margin:15px 0 0;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:bold;}
.blog{margin:14px 4px 0;}
.blog .h{font-weight:bold;} .blog p{margin:5px 0;}
.peachbar{background:var(--peach-bar);color:var(--orange);font-weight:bold;font-size:12px;
  padding:3px 0 3px 18px;margin-top:16px;}
.sub{color:var(--orange);font-weight:bold;font-size:12px;margin:6px 0 2px 15px;}
.body{margin:0 12px 12px 15px;}
.custom-html{margin:8px 12px 12px 15px;}
.fcount{margin:8px 0 10px 15px;font-size:12px;} .fcount b{color:var(--accent-red);}
.friends{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;justify-items:center;
  padding:0 6px;}
.friend{width:100%;max-width:130px;text-align:center;}
.friend .av{width:100%;max-width:120px;aspect-ratio:1;height:auto;display:block;margin:0 auto;
  border:1px solid #888;object-fit:cover;}
.friend .fn{font-size:11px;margin-top:3px;display:block;}
.viewall{text-align:right;margin:12px 12px 4px 0;}
.viewall a{color:var(--accent-red);}
.cmeta{margin:6px 0 8px 15px;display:flex;justify-content:space-between;padding-right:12px;}
table.comments{border-collapse:separate;border-spacing:0 6px;width:100%;margin-top:2px;}
table.comments th{background:var(--comment-th);width:120px;vertical-align:top;padding:6px;
  text-align:center;font-weight:normal;}
table.comments th .cav{width:80px;height:80px;display:block;margin:0 auto 4px;border:1px solid #b5651d;object-fit:cover;}
table.comments th a{color:var(--link);}
table.comments td{background:var(--comment-td);vertical-align:top;padding:6px 8px;}
table.comments td .date{font-size:11px;margin-bottom:5px;}
.addcomment{margin:8px 12px 6px 0;display:flex;gap:6px;align-items:flex-start;}
.addcomment textarea{flex:1;font-family:inherit;font-size:11px;border:1px solid var(--blue-bar);padding:4px;resize:vertical;}
.addcomment button{font-family:inherit;font-size:11px;background:var(--peach-bar);border:1px solid #e0a96a;
  padding:5px 10px;cursor:pointer;font-weight:bold;color:#b5651d;}
.av-person{width:100%;height:100%;display:block;}
.note{width:100%;background:#fffbe6;border-top:1px solid #e6dca0;
  font-size:11px;color:#776a2e;padding:6px 12px;text-align:center;}

/* ---------- responsive: stack on narrow screens, fill width on wide ---------- */
@media (max-width:760px){
  .cols{flex-direction:column;gap:0;padding:0 10px 24px;}
  .left,.right{flex:none;width:100%;}
  .strip1{height:auto;min-height:42px;padding:6px 10px;flex-wrap:wrap;gap:8px;}
  .searchbox{display:none;}
  .strip2{height:auto;}
  .strip2 ul{flex-wrap:wrap;justify-content:center;padding:3px 4px;}
  .strip2 li::after{margin:0 5px;}
  .extnet{height:auto;min-height:54px;padding:10px;font-size:14px;}
  .photoblock{grid-template-columns:130px 1fr;}
  .ppic{width:130px;height:135px;}
  .bluebox,.urlbox,.player,table.skin{margin-top:12px;}
  table.comments th{width:92px;}
  table.comments th .cav{width:62px;height:62px;}
  .friend .av{max-width:108px;}
}