/* Readable type and fluid layout; preserve the original Beauting artwork and colors. */
:root {
  --beauting-width: 1240px;
  --beauting-sidebar: 280px;
  --beauting-gap: 24px;
  --beauting-panel: #0b0b0b;
  --beauting-inset: #171717;
  --beauting-border: #222222;
  --beauting-text: #989898;
  --beauting-muted: #878686;
  --beauting-link: #00caec;
  --beauting-purple: #a80db4;
  --beauting-radius: 10px;
}
html { font-size: 16px; line-height: 1.5; color: var(--beauting-text); }
body { margin: 0; padding: 0; font-size: 1rem; line-height: 1.5; }
.wrapper, .wrapper *, .wrapper *::before, .wrapper *::after { box-sizing: border-box; }
.wrapper { width: calc(100% - 48px); max-width: var(--beauting-width); min-width: 0; margin-inline: auto; }
.wrapper a, .wrapper p, .wrapper h1, .wrapper h2, .wrapper h3, .wrapper td, .wrapper dd { overflow-wrap: anywhere; }
.wrapper img, .wrapper video, .wrapper iframe { max-width: 100%; }
/* Link colors and states come from the unchanged original stylesheets. */
h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 20px; }
h2 { font-size: 1.375rem; line-height: 1.3; margin-bottom: 14px; }
h3, h3.h { font-size: 1.25rem; line-height: 1.4; }
h4 { font-size: 1.125rem; line-height: 1.4; }
h5, h6, h1.m, h1.groups { font-size: 1rem; line-height: 1.5; }
h1.h, h2.h { float: none; margin: 0 0 20px; font-size: 1.375rem; line-height: 1.35; }

/* The header and two primary columns no longer depend on raster widths. */
.wrapper:has(> .wrapper-box-search) { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 0; background: none; border-radius: 0; }
.wrapper:has(> .wrapper-box-search) > .clearfix { display: none; }
.wrapper-box-search, .wrapper-box-favorite { float: none; height: auto; min-height: 48px; padding: 4px 20px; background: #161616; border-radius: 10px 10px 0 0; }
.wrapper-box-search { order: 2; min-width: 0; }
.wrapper-box-favorite { order: 1; font-size: .875rem; }
.wrapper-box-favorite a { line-height: 1.5; }
.wrapper-box-search .search-form { display: flex; gap: 8px; align-items: center; }
.wrapper-box-search input[type="text"] { width: min(320px, 32vw); margin: 0; min-width: 0; }
.wrapper-box { padding: 20px; background: #161616; }
.wrapper-box:has(> #main-content) {
  display: grid;
  grid-template-columns: var(--beauting-sidebar) minmax(0, 1fr);
  gap: 0 var(--beauting-gap);
  padding: 0 20px 20px;
  background: #161616;
}
.wrapper-box::after { display: none; }
.header2, #secondary-nav-outer { grid-column: 1 / -1; }
.header2 { position: relative; display: flex; align-items: flex-start; justify-content: flex-end; width: auto; height: auto; min-height: 86px; margin: 0; padding: 20px 5px 20px 300px; background: transparent url(images/bg-header.jpg) no-repeat 0 0 / 100% 86px; }
.header2 > .box-rounded-top { display: none; }
.logo { position: absolute; top: -13px; left: 20px; display: block; width: 269px; height: 77px; min-height: 0; padding: 40px 0 0 149px; font-size: 11px; line-height: 14px; background-position: 0 0; text-decoration: none; }
.main-nav-w { flex: 1; min-width: 0; }
.main-nav { float: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0; }
.main-nav::after { display: none; }
.main-nav li { float: none; display: block; margin: 0; }
.main-nav li a:link, .main-nav li a:visited, .main-nav li a:hover, .main-nav li a:active {
  float: none; display: block; padding: 0 14px 0 0; font-size: 1rem; line-height: 39px;
  background: transparent url(images/bg-main-nav-r.png) no-repeat 100% 0;
  border: 0; border-radius: 0; box-shadow: none; color: #fff;
}
.main-nav li span { float: none; display: block; padding: 0 4px 0 18px; background: transparent url(images/bg-main-nav-l.png) no-repeat 0 0; }
#secondary-nav-outer { height: auto; min-height: 36px; margin: 0 0 10px; padding: 7px 20px 8px; background: transparent url(images/bg-secondary-nav.png) no-repeat 0 0 / 100% 100%; border: 0; }
#secondary-nav-inner { overflow: visible; }
#secondary-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 10px; margin: 0; }
#secondary-nav::after { display: none; }
#secondary-nav li { float: none; display: block; margin: 0; padding: 0 0 0 13px; background: transparent url(images/bg-secondary-nav-li.gif) no-repeat 0 4px; }
#secondary-nav li a:link, #secondary-nav li a:visited, #secondary-nav li a:hover, #secondary-nav li a:active { font-size: .875rem; line-height: 21px; }
#side-content, #main-content { float: none; display: block; width: auto; min-width: 0; }
#side-content { grid-column: 1; font-size: .875rem; line-height: 1.5; }
#main-content { grid-column: 2; grid-row: 3; }

/* Original panel artwork scales with the repaired columns. */
.side-box-top, .content-box-top, .navigation-box-top { position: relative; padding: 0; margin: 0 0 10px; border: 0; border-radius: 10px; }
.side-box-top { background: url(images/bg-side-box-top.png) no-repeat 0 0 / 100% 44px, url(images/bg-side-box-bottom.png) no-repeat 0 100% / 100% 9px, url(images/bg-side-box.png) repeat-y 0 0 / 100% 1px; }
.content-box-top { background: url(images/bg-content-box-top.png) no-repeat 0 0 / 100% 44px, url(images/bg-content-box-bottom.png) no-repeat 0 100% / 100% 9px, url(images/bg-content-box.png) repeat-y 0 0 / 100% 1px; }
.navigation-box-top { background: url(images/bg-navigation-top.png) no-repeat 0 0 / 100% 35px, url(images/bg-navigation-bottom.png) no-repeat 0 100% / 100% 10px, url(images/bg-navigation-box.png) repeat-y 0 0 / 100% 1px; }
.side-box-bottom, .content-box-bottom, .navigation-box-bottom { padding: 0; background: none; }
.side-box, .content-box { display: flow-root; min-width: 0; padding: 12px 20px 20px; background: none; }
.navigation-box { padding: 16px 20px; background: none; line-height: 1.5; }
#navigation-box { margin: 0 !important; }
#wps_content { margin-top: 0 !important; }
.side-box > h1.h, .side-box > h2.h, .content-box > h1.h, .content-box > h2.h { display: flex; align-items: center; gap: 0; float: none; margin: 0 0 4px; font-size: 1.375rem; line-height: 1.35; }
.side-box > h2.h { font-size: 1.25rem; padding-right: 20px; }
h1 i.icon, h2 i.icon { float: none; display: block; flex: 0 0 50px; width: 50px; height: 43px; margin: -14px 2px 0 -5px; }
.news-rss { position: absolute; right: 18px; top: 24px; float: none; margin: 0; font-size: .75rem; }
.p_box { margin-bottom: 10px; padding: 16px; background: #171717 url(images/bg-box.gif) repeat-x 0 0; border: 1px solid #222; border-radius: 0; font-size: inherit; line-height: inherit; min-width: 0; }
.p_box h1, .p_box h2 { font-size: 1.375rem; line-height: 1.35; }
.p_box.btitle h1 { margin: -16px -16px 16px; padding: 12px 16px; }
#side-content .hr, #main-content .hr { margin: 0 -20px 5px; background: transparent url(images/bg-hr.gif) repeat-x 0 0; }
#main-content p { margin-bottom: 14px; }
#main-content .content-box > p.wiki { max-width: 760px; }
#main-content p.wiki:has(> br:only-child) { margin: 0; line-height: 6px; }
.p_box p:last-child { margin-bottom: 0; }
.news-article { line-height: 1.5; }
.news-date, .event-date, .write-date, .news .info, .postinfo, .field_notice, .profile-link,
.user-menu .user-menu-small, .user-menu .user-menu-small a, .commentmenu, .commentmsg .message { font-size: .875rem; line-height: 1.5; }
.news-date, .event-date { float: none; display: inline-flex; margin: 8px 0; padding: 0 5px 0 0; background: transparent url(images/bg-default-date-right.png) no-repeat 100% 0 / 5px 100%; border-radius: 0; }
.news-date span, .event-date span { float: none; display: block; padding: 2px 0 1px 5px; height: auto; min-height: 24px; background: transparent url(images/bg-default-date-left.png) no-repeat 0 0 / auto 100%; color: #878686; line-height: 1.5; }
.news-desc { margin-bottom: 18px; }
.news-desc p { margin-bottom: 10px; }
a.more:link, a.more:visited, a.more:hover, a.more:active,
a.more-purple:link, a.more-purple:visited, a.more-purple:hover, a.more-purple:active { display: inline-block; font-size: .875rem; line-height: 22px; margin-block: 8px; }
.side-box a.more-purple { float: none; }
.beauting-reading { max-width: 760px; margin-inline: auto; font-size: 1.125rem; line-height: 1.555556; }
.beauting-reading p.wiki { text-align: left !important; }
.beauting-reading img { max-width: 100%; height: auto; }
.news, .newsmin { font-size: inherit; }
.news .info ul li, .newsmin .info ul li { height: auto; min-height: 21px; }

/* Every text-bearing form control has room for the chosen font. */
input, select, textarea, button { font-family: Arial, Tahoma, sans-serif; font-size: 1rem; line-height: 1.5; }
.wrapper input[type="text"], .wrapper input[type="password"], .wrapper input[type="email"], .wrapper input[type="search"], .wrapper input[type="number"], .wrapper select, .wrapper textarea {
  max-width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 1rem; line-height: 22px;
  border: 1px solid #4b4b4b; background: #2c2c2c; border-radius: 2px; color: #fff;
}
.wrapper textarea { resize: vertical; }
.wrapper input::placeholder, .wrapper textarea::placeholder { color: #aaa; opacity: 1; }
.p_button, .p_button2 { display: inline-block; max-width: 100%; min-height: 40px; padding: 8px 14px; font-size: .875rem; line-height: 22px; white-space: normal; text-align: center; vertical-align: middle; border-radius: 2px; border: 1px solid #595757 !important; overflow: visible; }
.p_button { background: transparent url(uiimages/bg_button_blue.png) repeat-x 0 0 / auto 200%; }
.p_button2 { background: transparent url(uiimages/bg_button_purple.png) repeat-x 0 0 / auto 200%; }
.p_button:hover { border-color: #007188 !important; }
.p_button2:hover { border-color: #350342 !important; }
.p_button:hover, .p_button2:hover { background-position: 0 100%; background-size: auto 200%; }
.default-button, .default-button2 { font-size: .875rem; line-height: 1.5; }
.signin .p_box { padding: 14px; }
.signin input[type="text"], .signin input[type="password"] { display: block; width: 100%; margin: 0 0 10px; font-size: .875rem; }
.signin .labelDiv { display: none; }
.signin .p_button2, .signin .p_button.right { display: block; float: none !important; width: 100%; margin: 10px 0; }
.labelDiv { height: 10px; }
.ui-autocomplete { display: inline-block; position: relative; max-width: 100%; height: 40px; min-height: 40px; border: 1px solid #4b4b4b; border-radius: 2px; background: #2c2c2c; overflow: visible; vertical-align: middle; }
.wrapper .ui-autocomplete input { position: relative; display: block; width: 100% !important; max-width: 100%; height: 38px; min-height: 38px; margin: 0; border: 0; background: transparent; padding: 8px 10px; }
.ui-autocomplete-hint { padding: 8px 10px; font-size: 1rem; line-height: 22px; }
.ui-autocomplete-list { font-size: 1rem; line-height: 1.5; max-width: min(100%, 400px); }
.ui-autocomplete-loader { position: absolute; right: 8px; top: 12px; margin: 0; }
.default-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 0; }
.default-form::after { display: none; }
.default-form .unit { float: none; display: block; width: auto; min-width: 0; margin: 0; }
.default-form .unit > label { display: block; margin-bottom: 6px; }
.default-form .unit input:not([type="submit"]):not([type="hidden"]), .default-form .unit > select, .default-form .unit .ui-autocomplete { width: 100% !important; }
.default-form .unit:has(#register-day) { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 6px; }
.default-form .unit:has(#register-day) > label { grid-column: 1 / -1; margin: 0; }
.default-form .unit:has(#register-day) > select { padding-inline: 4px; }
.default-form .desc { font-size: .875rem; line-height: 1.5; margin: 0; }
.field_r, .field_r_c, .field_r_s, .field_l, .field_l_s, dl.field_r, dl.field_info { line-height: 1.5; }
.field_r, .field_r_c, .field_r_s { padding-left: 0; }
.field_error { padding-left: 0; line-height: 1.5; }
.field_params { max-width: 100%; padding-left: 0; }
.wrapper form table { max-width: 100%; }
.wrapper .table-info td { min-width: 0; }
.wrapper .table-info td.v { display: table-cell; width: auto; max-width: none; }

/* Content-sized rows prevent long titles from covering the next card. */
.write { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; list-style: none; }
.write::after { display: none; }
.write li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; float: none; width: auto; height: auto; min-height: 148px; margin: 0; padding: 16px 0; background: transparent url(images/bg-hr.gif) repeat-x 0 0; border: 0; align-items: start; }
.write li .photo { float: none; display: block; width: 90px; height: 120px; overflow: hidden; }
.write li .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.write li .write-w { margin: 0; min-width: 0; }
.write li .write-date { color: #616161; font-size: .875rem; margin-bottom: 4px; }
.write li .write-article { line-height: 1.5; }
.write li .write-author { font-size: .875rem; line-height: 1.5; margin-top: 6px; }
.p_user { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; height: auto; min-height: 94px; padding-block: 10px; margin-bottom: 0; }
.p_user_photo { float: none; width: 50px; height: 70px; }
.p_user_photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p_user_info { float: none; margin: 0; width: auto; min-width: 0; }
.p_user_action { min-width: 0; }
.p_item, .p_item_min { display: flow-root; height: auto; min-width: 0; }
.p_item_info { width: auto; max-width: calc(100% - 104px); }
.p_item .info_box ul { height: auto; min-height: 24px; }
.p_item_min .info_r, .p_item_min .info_r2 { min-width: 0; }

/* Search keeps the result list and its filters within the expanded column. */
#main-content table:has(#search_result) { display: block; width: 100%; }
#main-content table:has(#search_result) > tbody { display: block; }
#main-content table:has(#search_result) > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; }
#main-content table:has(#search_result) > tbody > tr > td { display: block; width: auto !important; min-width: 0; padding: 0 !important; }
/* Job action links need more than the legacy 80px column at 16px type. */
#search_result .jobmin td.action { width: 112px; min-width: 112px; }
#search_result .jobmin td.action > a { white-space: nowrap; }
#filter_form, #search_filters { min-width: 0; }
.search_filter_textarea, .search_filter_text, .search_filter_select, .search_filter_autocomplete, .search_filter_wps_select { width: 100%; max-width: 100%; }
.search_filter_select_min, .search_filter_text_min { width: calc((100% - 32px) / 2); }
#srh_main_text { width: calc(100% - 86px); }
.p_menu_tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; height: auto; margin-bottom: 16px; }
.p_menu_tabs::after { display: none; }
.p_menu_tabs li, .p_menu_tabs li.right { float: none !important; margin: 0; line-height: 24px; }
.p_menu_tabs li.right { margin-left: auto; }
.p_box:has(> #srh_main_text) > br { display: none; }
.search_counts { float: none; font-size: .875rem; }
.p_menu_top, .content-menu ul, .comment_body_action, .comments_add_action, .table_topic .message .body .action { height: auto; min-height: 24px; }
.p_menu_top { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; padding: 12px; }
.p_menu_top li, .p_menu_top li.right { float: none; padding: 0; }
.content-menu { height: auto; min-height: 30px; overflow: visible; display: flow-root; }
.content-menu ul { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 8px 0; }
.content-menu ul li, .content-menu ul li.right { float: none; margin: 0; padding: 0 0 0 13px; background: transparent url(images/bg-secondary-nav-li.gif) no-repeat 0 4px; }

/* Profile and group detail columns share the available space. */
:is(.content-box, #wps_content):has(> .user_col_left) { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
:is(.content-box, #wps_content):has(> .user_col_left) > h1, :is(.content-box, #wps_content):has(> .user_col_left) > h2,
:is(.content-box, #wps_content):has(> .user_col_left) > .account_status_box, :is(.content-box, #wps_content):has(> .user_col_left) > .account_status_view { grid-column: 1 / -1; }
.user_col_left, .user_col_right { float: none; width: auto; min-width: 0; }
#wps_content:has(> .user_col_left) > .right { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; float: none !important; }
#wps_content:has(> .user_col_left) > h1 { grid-row: 1; width: calc(100% - 42px); margin: 0; }
.user_col_left { grid-column: 1; }
.user_col_right { grid-column: 2; }
h1 .userid { font-size: .875rem; white-space: normal; }
.profile-photo { display: block; width: 100%; height: auto; }
#wps_content > table:has(#group_photo), #wps_content > table:has(#group_photo) > tbody { display: block; width: 100%; }
#wps_content > table:has(#group_photo) > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
#wps_content > table:has(#group_photo) > tbody > tr > td { display: block; width: auto !important; min-width: 0; padding: 0 !important; }
:is(.content-box, #wps_content):has(> .user_col_left) > .clearfix, :is(.content-box, #wps_content):has(> .user_col_left) > .clear { display: none; }
:is(.content-box, #wps_content):has(> .user_col_left) > .p_box, :is(.content-box, #wps_content):has(> .user_col_left) > .wall, :is(.content-box, #wps_content):has(> .user_col_left) > #wall { grid-column: 1 / -1; }
.account_status_box, .account_status_view { width: auto; max-width: 100%; }
dl.field_info { display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr); gap: 4px 12px; overflow: visible; }
dl.field_info dt { float: none; width: auto; padding: 0; }
dl.field_info dd { margin: 0; min-width: 0; }
.progressbar-value { flex: 0 0 42px; }
.progressbar { max-width: calc(100% - 42px); }
.comment_body { width: auto; min-width: 0; float: none; margin-left: 92px; }
.comment_replies .comment_body { width: auto; }
.comment_body_text { overflow-wrap: anywhere; }
.comments textarea, .comment_add textarea, .comment_reply_form textarea, .commenttextadd { max-width: 100%; }
.account_profile_view, .groups_rules_wrap { max-width: 100%; }
.groupmin .table-info { width: 100%; table-layout: fixed; }
.groupmin .table-info td.l { width: 110px; min-width: 110px; }
.table-info td.l { overflow-wrap: normal; word-break: normal; }
.table-info { max-width: 100%; }
.gallery_photos_wrap { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.photomin { float: none; margin: 0; flex: 0 0 82px; }

/* Full-width homepage grids no longer bleed out of their wrapper. */
.new-users-w { overflow: visible; }
.new-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; margin: 0; }
.new-users li { float: none; display: block; padding: 0 0 8px; background: transparent url(images/bg-new-user-li.gif) repeat-x 0 100%; min-width: 0; }
.new-users li a { width: 100%; height: 120px; }
.new-users li img { display: block; width: 100%; height: 100%; object-fit: cover; }
.new-users li.last { display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; height: 120px; padding: 32px 0 0; font-size: .875rem; }
.new-users li.last a { height: auto; border: 0; }
.new-users li.last i { top: 24px; }
.user-increased-by-title, .user-increased-by-avg { font-size: .875rem; line-height: 1.5; margin-block: 16px; }
.user-increased-by-w { margin: 0; font-size: .875rem; }
.user-increased-by { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 8px; }
.user-increased-by .unit { float: none; width: auto; min-width: 0; margin: 0; }
.user-increased-by .unit .date { padding-inline: 2px; }
.fnews, .fntitle, .fnbody { width: auto; max-width: 100%; }
/* A little more space between homepage news entries. */
#fashionnews > .fnews ~ .hr { margin-top: 8px; margin-bottom: 10px; }
.fntitle { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.fntitle .news-date { flex: 0 0 auto; margin: 0; }
.news-article2 { float: none; flex: 1 1 200px; margin: 0; line-height: 1.5; }
.fnbody { margin-inline: 0; padding-inline: 0; }
.w-more { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.w-more::after { display: none; }
.w-more .p_button, .w-more a.more-purple { float: none; margin: 0; }
.wysiwyg h1, h1.wiki { font-size: 1.5rem; line-height: 1.3; }
.wysiwyg h2, h2.wiki { font-size: 1.375rem; line-height: 1.35; }
.wysiwyg h3, h3.wiki { font-size: 1.25rem; line-height: 1.4; }
#footer { width: auto; max-width: 100%; min-width: 0; padding: 24px 0; font-size: .875rem; line-height: 1.5; }
#footer .nav-w, #footer .nav { float: none; margin: 0; width: auto; }
#footer .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
#footer .nav li { float: none; margin: 0; padding: 0; font-size: 1rem; line-height: 1.5; }
.profile-group-list li a { font-size: .875rem; line-height: 1.5; }
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid #989898; outline-offset: 2px; }

@media (max-width: 1199px) {
  :root { --beauting-sidebar: 248px; --beauting-gap: 20px; }
  .main-nav { gap: 8px; }
  #secondary-nav { justify-content: flex-start; }
  #main-content table:has(#search_result) > tbody > tr { grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
  .write { grid-template-columns: 1fr; }
  :is(.content-box, #wps_content):has(> .user_col_left) { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .wrapper { width: calc(100% - 32px); }
  .wrapper-box:has(> #main-content) { grid-template-columns: minmax(0, 1fr); }
  .header2 { min-height: 86px; padding-left: 300px; }
  .main-nav { gap: 8px; }

  .main-nav-w { flex: 1; }
  .main-nav { justify-content: flex-start; }
  #main-content { grid-column: 1; grid-row: 3; }
  #side-content { grid-column: 1; grid-row: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 24px; }
  .side-box-top { margin-bottom: 0; }
  .write { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-increased-by { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .header2 { display: block; padding: 0 0 12px; min-height: 0; }
  .logo { position: relative; top: 0; left: 0; margin-bottom: 0; }
}
/* The legacy viewer script imposes a 900px minimum; constrain its overlay. */
@media (max-width: 799px) {
  .pv_bg, .pv_scroll { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw; height: 100dvh !important; }
  .pv_scroll { overflow-x: hidden; overflow-y: auto; }
  .pv_scroll, .pv_scroll * { box-sizing: border-box; }
  .pv_side_preview, .pv_side_close { display: none; }
  .pv_canvas { float: none; width: calc(100% - 24px) !important; max-width: 700px; margin: 12px auto; }
  .pv_canvas_action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pv_canvas_action .pv_count { order: 1; padding: 10px 12px; font-size: .875rem; line-height: 22px; }
  .pv_canvas_action #pv_close { order: 2; float: none; min-height: 44px; padding: 10px 12px; color: #ddd; }
  .pv_photoarea_wrap { padding: 12px; }
  #pv_photoarea { width: 100% !important; height: auto !important; max-width: 100%; background: none; }
  #pv_photo { display: block; width: auto; max-width: 100%; height: auto; max-height: 65dvh; object-fit: contain; margin-inline: auto; }
  #pv_photoslider { max-width: 100%; overflow-x: auto; }
  .pv_photoinfo { padding: 12px; }
  .pv_photoinfo_table, .pv_photoinfo_table > tbody, .pv_photoinfo_table > tbody > tr, .pv_photoinfo_table td { display: block; width: 100% !important; }
  #pv_photo_info, #pv_photo_comments { width: 100%; max-width: 100%; }
  #pv_photo_action { width: 100%; margin: 16px 0 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid #333; }
  .pv_canvas p, .pv_canvas a, .pv_canvas div { overflow-wrap: anywhere; }
  .pv_canvas textarea { max-width: 100%; }
}
@media (max-width: 639px) {
  .wrapper { width: calc(100% - 16px); }
  .wrapper:has(> .wrapper-box-search) { margin-top: 8px; padding: 0; flex-wrap: wrap; gap: 0; }
  .wrapper-box-search, .wrapper-box-favorite { padding: 4px 12px; }
  .wrapper-box-search { flex: 1 1 100%; }
  .wrapper-box-search input[type="text"] { flex: 1; width: 100%; }
  .wrapper-box { display: block; padding: 0 12px 16px; }
  .wrapper-box:has(> #main-content) { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 12px 16px; }
  .header2 { display: block; min-height: 0; padding: 0 0 12px; margin-bottom: 0; background-size: 100% 86px; }
  .logo { position: relative; top: 0; left: 0; width: 269px; max-width: 100%; height: 77px; min-height: 77px; margin-bottom: 0; padding: 40px 0 0 149px; font-size: 11px; }
  .main-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .main-nav li a:link, .main-nav li a:visited, .main-nav li a:hover, .main-nav li a:active { padding: 0 14px 0 0; font-size: .875rem; line-height: 44px; background-size: auto 44px; text-align: center; }
  .main-nav li span { background-size: auto 44px; }
  #secondary-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  #secondary-nav-outer { margin-bottom: 10px; padding-inline: 10px; }
  .side-box, .content-box { padding: 16px; }
  .content-box > h1.h, .content-box > h2.h { font-size: 1.25rem; gap: 0; }
  #side-content .hr, #main-content .hr { margin-inline: -16px; }
  h1 { font-size: 1.5rem; line-height: 1.3; }
  .p_box { padding: 12px; }
  .p_box h1, .p_box h2 { font-size: 1.25rem; }
  #side-content { display: block; margin-top: 20px; }
  #side-content .side-box-top { margin-bottom: 20px; }
  .default-form { grid-template-columns: minmax(0, 1fr); }
  .default-form .unit .right { float: none !important; width: 100%; }
  .write { grid-template-columns: minmax(0, 1fr); }
  .write li { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; min-height: 128px; }
  .write li .photo { width: 68px; height: 92px; }
  #main-content table:has(#search_result) > tbody > tr { grid-template-columns: minmax(0, 1fr); }
  #main-content table:has(#search_result) > tbody > tr > td { padding: 0 !important; }
  #search_filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #search_filters .p_box { margin: 0; }
  #search_filters h2 { font-size: 1rem; }
  #search_filters .search_filter_select_min, #search_filters .search_filter_text_min { width: 100%; }
  #srh_main_text { width: 100%; margin-bottom: 10px; }
  :is(.content-box, #wps_content):has(> .user_col_left) { display: block; }
  .user_col_left { max-width: 260px; margin: 0 auto 20px; }
  #wps_content > table:has(#group_photo) > tbody > tr { grid-template-columns: minmax(0, 1fr); }
  #wps_content > table:has(#group_photo) .table-info tr { display: block; margin-bottom: 12px; }
  #wps_content > table:has(#group_photo) .table-info td { display: block; width: auto; padding: 0; text-align: left; }
  #wps_content > table:has(#group_photo) .table-info td.l { font-size: .875rem; }
  dl.field_info { grid-template-columns: 1fr; }
  dl.field_info dt { text-align: left; font-size: .875rem; }
  .wrapper form .table-info, .wrapper form .table-info > tbody, .wrapper form .table-info > tbody > tr, .wrapper form .table-info td,
  .wrapper form .table-form, .wrapper form .table-form > tbody, .wrapper form .table-form > tbody > tr, .wrapper form .table-form td { display: block; width: 100%; min-width: 0; max-width: 100%; }
  .wrapper form .table-info td.l, .wrapper form .table-form td.l { text-align: left; padding: 0 0 6px; }
  .wrapper form .table-info input[type="text"], .wrapper form .table-info input[type="password"], .wrapper form .table-info .ui-autocomplete,
  .wrapper form .table-form input[type="text"], .wrapper form .table-form input[type="password"], .wrapper form .table-form .ui-autocomplete { width: 100% !important; }
  .wrapper form .input_reg_sex { width: 100%; }
  .wrapper form .table-form td:has(.input_reg_day) { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 4px; }
  .wrapper form .table-form td:has(.input_reg_day) select { width: 100%; }
  .input_ct_name, .input_ct_email, .input_ct_from, .input_ct_topic, .input_ct_text { display: block; width: 100%; margin-right: 0 !important; }
  .wrapper input[type="file"] { max-width: 100%; font-size: .875rem; }
  .input_reg_day, .input_reg_year { width: 27%; padding-inline: 4px !important; }
  .input_reg_month { width: 42%; margin-inline: 0; padding-inline: 4px !important; }
  .table-info { table-layout: fixed; width: 100%; }
  .table-info td { width: auto; }
  .table-forms td { min-width: 0 !important; }
  .groupmin > table > tbody > tr { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .groupmin > table > tbody > tr > td { display: block; width: auto; }
  .groupmin .table-info td { display: block; text-align: left; padding: 0; }
  .comment_photo { width: 52px; }
  .comment_photo img { width: 50px; height: auto; }
  .comment_body { margin-left: 64px; }
  .comment_replies .comment_body { margin-left: 52px; }
  .user-increased-by { gap: 6px; }
  .user-increased-by .unit .date { font-size: .75rem; }
  .user-increased-by .unit .strip, .user-increased-by .unit .strip span { width: 24px; }
  #p_totop { right: 12px; bottom: 12px; }
}
@media (max-width: 479px) {
  #search_filters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  #search_filters { grid-template-columns: minmax(0, 1fr); }
  .logo { width: 250px; padding-left: 136px; background-size: 120px auto; }
}

/* Profile popups: keep the original surfaces, make room for readable text. */
.popup_box_container:has(.account_profile_view),
.popup_box_container:has(.account_profile_view) * { box-sizing: border-box; }
.popup_box_container:has(.account_profile_view) {
  position: absolute; left: 50% !important;
  /* Cancel the legacy vertical centering: top stays near the visible page edge. */
  transform: translate(-50%, 50%); margin-top: calc(16px - 50vh);
  width: min(550px, calc(100vw - 32px)); max-height: none;
}
body:has(> .popup_box_container .account_profile_view) > .popup_box_back {
  position: fixed; inset: 0; width: 100% !important; height: 100% !important;
}
.popup_box_container:has(.account_profile_view) .box_body { min-width: 0; padding: 12px; }
.popup_box_container:has(.account_profile_view) .box_control_wrap { padding: 10px 12px; }
.popup_box_container .account_profile_view {
  width: 100%; max-height: none;
  line-height: 1.5; overflow-wrap: anywhere; overflow: visible;
}
.popup_box_container .account_profile_cat_title { margin: 16px 0 8px; }
.popup_box_container .account_profile_cat_title:first-child { margin-top: 0; }
.popup_box_container .account_profile_params { padding: 10px 12px; }
.popup_box_container .account_profile_params dl {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  column-gap: 12px; margin: 0 0 8px; line-height: 1.5; overflow: visible;
}
.popup_box_container .account_profile_params dl:last-child { margin-bottom: 0; }
.popup_box_container .account_profile_params dt,
.popup_box_container .account_profile_params dd { float: none; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; }
@media (max-width: 639px) {
  .popup_box_container .account_profile_params dl { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .popup_box_container .account_profile_params dt { text-align: left; }
}

/* Account admin fields: keep labels whole and controls inside their column. */
.adminpanel #edituserform { display: flow-root; }
.adminpanel #edituserform > .right:first-child { width: 240px; max-width: 100%; margin-left: 20px; }
.adminpanel #edituserform > .left { display: flow-root; float: none !important; width: calc(100% - 260px); min-width: 0; }
.adminpanel #edituserform .field_r { overflow: visible; }
.adminpanel #edituserform > .left .field_r { display: flow-root; }
.adminpanel #edituserform .field_l_s { display: block; width: 90px; padding: 8px 12px 0 0; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.adminpanel #edituserform > .left input,
.adminpanel #edituserform > .left select { width: 220px; max-width: calc(100% - 90px); }
@media (max-width: 1100px) {
  .adminpanel #edituserform > .right:first-child { float: none !important; width: auto; margin: 0 0 16px; }
  .adminpanel #edituserform > .left { width: 100%; }
}
@media (max-width: 639px) {
  .adminpanel #edituserform .field_l_s { float: none; width: 100%; padding: 0 0 6px; text-align: left; }
  .adminpanel #edituserform > .left input,
  .adminpanel #edituserform > .left select { float: none; width: 100%; max-width: 100%; }
}

/* Center desktop category separators between neighboring labels. */
@media (min-width: 1200px) {
  #secondary-nav { column-gap: 0; }
  #secondary-nav li { flex: 1 0 auto; padding-inline: 10px; text-align: center; }
  #secondary-nav li:first-child { background: none; }
}