@charset "utf-8";
/*
 * artDialog skin
 * http://code.google.com/p/artdialog/
 * (c) 2009-2010 TangBin, http://www.planeArt.cn
 *
 * This is licensed under the GNU LGPL, version 2.1 or later.
 * For details, see: http://creativecommons.org/licenses/LGPL/2.1/
 */
 
/* common start */
body { _margin:0; _height:100%; /*IE6 BUG*/ }
.aui_outer { text-align:left; }
.aui_border, .aui_inner { border:0; margin:0; border-collapse:collapse; width:auto; }
.aui_nw, .aui_n, .aui_ne, .aui_w, .aui_center, .aui_e, .aui_sw, .aui_s, .aui_se, .aui_header, .aui_tdIcon, .aui_main, .aui_footer { padding:0; }
.aui_header, .aui_buttons button { font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial; }
.aui_title { overflow:hidden; text-overflow: ellipsis; }
.aui_state_noTitle .aui_title { display:none; }
.aui_close { display:block; position:absolute; text-decoration:none; outline:none; _cursor:pointer; }
.aui_close:hover { text-decoration:none; }
.aui_main { text-align:center; min-width:9em; min-width:0\9/*IE8 BUG*/; }
.aui_content { display:inline-block; *zoom:1; *display:inline; text-align:left; border:none 0; }
.aui_content.aui_state_full { display:block; width:100%; margin:0; padding:0!important; height:100%; }
.aui_loading { width:96px; height:32px; text-align:left; text-indent:-999em; overflow:hidden; background:url(icons/loading.gif) no-repeat center center; }
.aui_icon { vertical-align: middle; }
.aui_icon div { width:48px; height:48px; margin:10px 0 10px 10px; background-position: center center; background-repeat:no-repeat; }
.aui_buttons { padding:8px; text-align:right; white-space:nowrap; }
.aui_buttons button { margin-left:15px; padding: 6px 12px; cursor: pointer; display: inline-block; text-align: center; line-height: 1; *padding:4px 10px; *height:2em; letter-spacing:2px; font-family: Tahoma, Arial/9!important; width:auto; overflow:visible; *width:1; color: #333; border: solid 1px #999; border-radius: 5px; background: #DDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); background: linear-gradient(top, #FFF, #DDD); background: -moz-linear-gradient(top, #FFF, #DDD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD)); text-shadow: 0px 1px 1px rgba(255, 255, 255, 1); box-shadow: 0 1px 0 rgba(255, 255, 255, .7),  0 -1px 0 rgba(0, 0, 0, .09); }
.aui_buttons button:focus { outline:none 0; border-color:#426DC9; box-shadow:0 0 8px rgba(66, 109, 201, .9); }
.aui_buttons button:hover { color:#000; border-color:#666; }
.aui_buttons button:active { border-color:#666; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF'); background: linear-gradient(top, #DDD, #FFF); background: -moz-linear-gradient(top, #DDD, #FFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF)); box-shadow:inset 0 1px 5px rgba(66, 109, 201, .9), inset 0 1px 1em rgba(0, 0, 0, .3); }
.aui_buttons button[disabled] { cursor:default; color:#666; background:#DDD; border: solid 1px #999; filter:alpha(opacity=50); opacity:.5; box-shadow:none; }
button.aui_state_highlight { color: #FFF; border: solid 1px #3399dd; background: #2288cc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); text-shadow: -1px -1px 1px #1c6a9e; }
button.aui_state_highlight:hover { color:#FFF; border-color:#1c6a9e; }
button.aui_state_highlight:active { border-color:#1c6a9e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); }
/* common end */

.aui_inner { background:#FFF; }
.aui_outer, .aui_center { border:1px solid rgba(0, 0, 0, .3)!important; border:1px solid #333\9!important; }
.aui_outer { border-radius:3px; }
.aui_border { border-radius:2px; box-shadow: inset 0 0 1px rgba(255, 255, 255, .9); }
.aui_nw, .aui_ne, .aui_sw, .aui_se { width:8px; height:8px; }
.aui_nw, .aui_n, .aui_ne, .aui_w, .aui_e, .aui_sw, .aui_s, .aui_se { background:rgba(0, 0, 0, .2); background:#000\9!important; filter:alpha(opacity=20); }
.aui_state_focus .aui_inner { box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); }
.aui_state_focus .aui_outer { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
.aui_state_drag .aui_outer { box-shadow:none; border:1px solid rgba(0, 0, 0, .4)!important; border:1px solid #333\9!important; }
.aui_titleBar { position:relative; height:100%; }
.aui_title { height:28px; line-height:27px; padding:0 28px 0 10px; text-shadow:0 1px 0 rgba(18, 91, 167, .7); background-color:#edf5f8; font-weight:bold; color:#95a7ae; font-family: Tahoma, Arial/9!important; background-color:#bdc6cd; background: linear-gradient(top, #2673c4, #75a6da); background: -moz-linear-gradient(top, #2673c4, #75a6da); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2673c4), to(#75a6da)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2673c4', endColorstr='#75a6da'); border-top:1px solid #1e6bbc; border-bottom:1px solid #699bd1; }
.aui_state_focus .aui_title { color:#fff; font-size:14px}
.aui_state_drag .aui_title { background: linear-gradient(top, #3580cf, #85b2e3); background: -moz-linear-gradient(top, #3580cf, #85b2e3); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3580cf), to(#85b2e3)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3580cf', endColorstr='#85b2e3'); box-shadow:none; }
.aui_state_drag .aui_titleBar { box-shadow:none; }
.aui_close { padding:0; top:3px; right:3px; width:21px; height:21px; line-height:21px; font-size:18px; color:#fff; text-align:center; font-family: Helvetica, STHeiti; _font-family: '\u9ed1\u4f53', 'Book Antiqua', Palatino; text-shadow:0 1px 0 rgba(18, 91, 167, .9); }
.aui_close:hover { color:#C72015; }
.aui_close:active { box-shadow: none; }
.aui_content { color:#666; }
.aui_state_focus .aui_content { color:#000; }

/*套餐样式*/
/* 模拟现有页面表单区 */
.page-wrap { max-width: 960px; margin: 20px auto; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; }
.form-header { background: #f8f8f8; border-bottom: 1px solid #e0e0e0; padding: 12px 20px; }
.form-header h3 { font-size: 16px; color: #333; }
.form-header a { color: #009900; text-decoration: none; font-size: 13px; }

/* 模拟一行表单 */
.form-row { display: flex; align-items: flex-start; padding: 15px 20px; }
.form-label {font-size: 14px; width: 100px; text-align: right; padding-right: 10px; flex-shrink: 0; line-height: 32px; color: #555; }
.form-label .red { color: #ff0000; }
.form-content { flex: 1; }
/* 套餐卡片区域 */
.plan-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.plan-card {
    flex: 1; min-width: 200px; max-width: 280px;
    border: 2px solid #e0e0e0; border-radius: 8px;
    background: #fff; cursor: pointer;
    transition: all 0.3s; position: relative; overflow: hidden;
}
.plan-card:hover { border-color: #009900; box-shadow: 0 2px 12px rgba(0,153,0,0.15); }
.plan-card.selected { border-color: #009900; background: #f0fff0; }
.plan-card.selected::after {
    content: "✓"; position: absolute; top: 8px; right: 10px;
    background: #009900; color: #fff; width: 22px; height: 22px;
    border-radius: 50%; text-align: center; line-height: 22px; font-size: 13px;
}
.plan-card .card-badge {
    display: inline-block; padding: 2px 10px; font-size: 12px; color: #fff;
    border-radius: 0 0 8px 0;
}
.badge-free { background: #999; }
.badge-standard { background: #2196F3; }
.badge-premium { background: #FF9800; }
.plan-card .card-header { padding: 15px 15px 10px; text-align: center; }
.plan-card .card-header h4 { font-size: 16px; margin-bottom: 6px; color: #333; }
.plan-card .price { font-size: 28px; color: #ff6600; font-weight: bold; }
.plan-card .price .unit { font-size: 14px; color: #999; font-weight: normal; }
.plan-card .price-year { font-size: 13px; color: #999; margin-top: 4px; }
.plan-card .price-year span { color: #ff6600; font-weight: bold; }
.plan-card .card-body { padding: 0 15px 15px; }
.plan-card .feature-list { list-style: none; font-size: 12px; color: #666; line-height: 1.8; }
.plan-card .feature-list li { padding-left: 16px; position: relative; }
.plan-card .feature-list li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 6px; height: 6px; background: #009900; border-radius: 50%;
}

/* 月/年切换 */
.period-toggle { margin-bottom: 12px; }
.period-toggle label {
    display: inline-block; padding: 4px 16px; border: 1px solid #ddd;
    border-radius: 20px; cursor: pointer; font-size: 13px; margin-right: 6px;
    transition: all 0.2s;
}
.period-toggle label.active { background: #009900; color: #fff; border-color: #009900; }
.period-toggle input { display: none; }

/* 模拟底部按钮 */
.form-actions { padding: 20px; text-align: center; }
.btn-submit {
    background: #009900; color: #fff; border: none; padding: 10px 40px;
    font-size: 16px; border-radius: 4px; cursor: pointer;
}
.btn-submit:hover { background: #008800; }
.note { font-size: 12px; color: #999; margin-top: 8px; }