* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family:
Arial,
Helvetica,
sans-serif;
background:
#f5f7fb;
color:
#1f2937;
}
a {
color: inherit;
}
.hidden {
display:
none !important;
}
/* ============================================================
PAGE
============================================================ */
.marketplace-page {
min-height:
100vh;
padding:
40px 20px;
}
.marketplace-container {
width:
min(
900px,
100%
);
margin:
0 auto;
}
/* ============================================================
HEADER
============================================================ */
.marketplace-header {
display:
flex;
align-items:
center;
gap:
16px;
margin-bottom:
28px;
}
.brand-mark {
width:
52px;
height:
52px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
14px;
background:
#2563eb;
color:
#ffffff;
font-weight:
700;
font-size:
15px;
}
.marketplace-header h1 {
margin:
0 0 6px;
font-size:
30px;
line-height:
1.2;
}
.marketplace-header p {
margin:
0;
color:
#6b7280;
font-size:
14px;
}
/* ============================================================
CARD
============================================================ */
.card {
background:
#ffffff;
border:
1px solid #e5e7eb;
border-radius:
14px;
padding:
24px;
margin-bottom:
18px;
}
.card h2 {
margin:
0;
font-size:
20px;
}
.card p {
line-height:
1.5;
}
/* ============================================================
MESSAGE
============================================================ */
.message {
display:
none;
padding:
13px 16px;
margin-bottom:
18px;
border-radius:
10px;
font-size:
14px;
}
.message.show {
display:
block;
}
.message.error {
background:
#fef2f2;
border:
1px solid #fecaca;
color:
#991b1b;
}
.message.info {
background:
#eff6ff;
border:
1px solid #bfdbfe;
color:
#1e40af;
}
.message.success {
background:
#ecfdf5;
border:
1px solid #a7f3d0;
color:
#065f46;
}
/* ============================================================
STATE CARD
============================================================ */
.state-card {
text-align:
center;
padding:
42px 24px;
}
.state-icon {
width:
44px;
height:
44px;
margin:
0 auto 16px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
50%;
background:
#eef2ff;
color:
#2563eb;
font-size:
20px;
font-weight:
700;
}
.state-card h2 {
margin-bottom:
10px;
}
.state-card p {
max-width:
500px;
margin:
0 auto 22px;
color:
#6b7280;
}
/* ============================================================
BUTTON
============================================================ */
.primary-button {
display:
inline-flex;
align-items:
center;
justify-content:
center;
min-height:
42px;
padding:
10px 18px;
border:
0;
border-radius:
9px;
background:
#2563eb;
color:
#ffffff;
font-size:
14px;
font-weight:
600;
text-decoration:
none;
cursor:
pointer;
transition:
background 0.15s ease,
transform 0.15s ease;
}
.primary-button:hover {
background:
#1d4ed8;
}
.primary-button:active {
transform:
translateY(1px);
}
/* ============================================================
SECTION
============================================================ */
.section-header {
display:
flex;
align-items:
center;
justify-content:
space-between;
margin-bottom:
18px;
}
.section-label {
display:
block;
margin-bottom:
5px;
color:
#6b7280;
font-size:
11px;
font-weight:
700;
letter-spacing:
0.08em;
}
/* ============================================================
ACCOUNT
============================================================ */
.account-card {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
}
.account-card h2 {
margin-bottom:
5px;
}
.account-card p {
margin:
0;
color:
#6b7280;
font-size:
14px;
}
.account-status {
flex-shrink:
0;
padding:
7px 12px;
border-radius:
999px;
background:
#ecfdf5;
color:
#047857;
font-size:
12px;
font-weight:
600;
}
/* ============================================================
SCRIPT
============================================================ */
.script-card {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
24px;
padding:
4px 0;
}
.script-info {
display:
flex;
align-items:
center;
gap:
14px;
min-width:
0;
}
.script-icon {
width:
48px;
height:
48px;
flex-shrink:
0;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
12px;
background:
#eef2ff;
color:
#3730a3;
font-size:
12px;
font-weight:
700;
}
.script-details {
min-width:
0;
}
.script-details h3 {
margin:
0 0 5px;
font-size:
16px;
}
.script-meta {
margin:
0;
color:
#6b7280;
font-size:
13px;
}
.script-meta span {
margin:
0 5px;
}
.script-source {
margin:
5px 0 0;
color:
#9ca3af;
font-size:
12px;
}
/* ============================================================
INSTALLED SCRIPTS
============================================================ */
.installed-scripts {
min-height:
50px;
}
.installed-empty {
padding:
16px;
border-radius:
10px;
background:
#f9fafb;
color:
#6b7280;
font-size:
14px;
}
.installed-script {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
16px;
padding:
14px 0;
border-bottom:
1px solid #e5e7eb;
}
.installed-script:last-child {
border-bottom:
0;
}
.installed-script-name {
font-weight:
600;
font-size:
14px;
}
.installed-script-meta {
margin-top:
4px;
color:
#6b7280;
font-size:
12px;
}
.installed-script-source {
padding:
5px 9px;
border-radius:
999px;
background:
#f3f4f6;
color:
#4b5563;
font-size:
11px;
font-weight:
600;
}
/* ============================================================
FOOTER
============================================================ */
.marketplace-footer {
padding:
10px 0 20px;
text-align:
center;
}
.marketplace-footer p {
margin:
0;
color:
#9ca3af;
font-size:
12px;
}
/* ============================================================
MOBILE
============================================================ */
@media (
max-width: 600px
) {
.marketplace-page {
padding:
24px 14px;
}
.marketplace-header {
align-items:
flex-start;
}
.marketplace-header h1 {
font-size:
25px;
}
.card {
padding:
18px;
}
.account-card {
align-items:
flex-start;
flex-direction:
column;
}
.script-card {
align-items:
flex-start;
flex-direction:
column;
}
.script-card .primary-button {
width:
100%;
}
.installed-script {
align-items:
flex-start;
flex-direction:
column;
}
}